2

質問：

jQuery に少し問題があります。この HTML を考えてみましょう。「https」を左クリックし、値を変更してから [OK] をクリックします。OK で、テキスト ボックスを削除し、onclick ハンドラーを再アタッチする必要があります。これはそうですが、onclickは現在のクリックによってすでに発行されています...

なんで ？そして、これを正しく行う方法は?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tabelle editieren</title>
    <!--
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
    -->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>  

    <style type="text/css" media="all">
        html {margin: 0px; padding: 0px; height: 100%;}
        body {margin: 0px; padding: 0px; height: 100%;}
        input{margin: 0px; padding: 0px; }

        tr:nth-child(2n+1) {background-color: #F0F0F0;}
        tr:nth-child(2n)   {background-color: #FEFEFE;}

        td
        {
            margin: 0px; padding: 0.5cm; padding: 0px; text-align: left; 
        }


    </style>

    <script type="text/javascript" language="javascript">

        function hello(me) {
            //alert("hello");
            var str = $(me).text();
            //alert(str);
            $(me).html("<input id=\"my1\" type=\"text\" style=\"width: 198px; height: 100%;\" value=\"" + str + "\" /><input id=\"my1confirm\" type=\"button\" onclick=\"bye(this);\"style=\"width: 35px;\" value=\"" + "OK" + "\" />");
            $(me).attr('onclick', '').unbind('click');

            return false;
        }


        function bye(me) {
            var objTR = $(me).parent();

            //var tb = $(me).closest('table');
            var tb = objTR.find('input');
            var str = tb.val();
            tb.remove();

            objTR.text(str);
            alert("TODO: sending change event with { id : \"" + objTR.attr('id') + "\", str : \"" + str + "\" } to server");


            /*
            objTR.click(function () {
                alert("hi");
                return false;
            });
            */


            objTR.attr('onclick', '').bind("click", function (e) {
                e.preventDefault();
                alert("it shouldn't  execute this in this click, but it does... ");
                //hello(this);
                //event.stopImmediatePropagation();
            });

            return false;
        }


        $(document).ready(function () {
            //$('#myDataTable').dataTable().makeEditable();

        });
    </script>

</head>
<body style="margin: 0.5cm;">
    <h1>Application configuration</h1>
    <!--

    -->
    <table border="1" style="border-collapse: collapse;" >
      <thead>
        <tr style="background-color: Black; color:White; font-weight: bold; text-transform: capitalize;">
          <th style="width: 235px; text-align: left;">key</th>
          <th style="width: 235px; text-align: left;">value</th>
        </tr>
      </thead>
      <tfoot>
        <tr style="background-color: Black; color:White; font-weight: bold; text-transform: capitalize;">
          <th style="text-align: left;">key</th>
          <th style="text-align: left;">value</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Environment</td>
          <td id="server">testing</td>
        </tr>

        <tr>
          <td>Protocol</td>
          <td id="Protocol" onclick="hello(this);">https</td>
        </tr>

        <tr>
          <td>UserHashMode</td>
          <td id="UserHashMode">true</td>
        </tr>

        <tr>
          <td>Logo</td>
          <td id="Logo">LogoFileCustomerN.png</td>
        </tr>

      </tbody>
    </table>
</body>
</html>
4

3 に答える 3

1

インライン イベント ハンドラーは jQuery でバインドを解除できないようです:インライン onClick のバインドを解除すると、jQuery で機能しませんか?

うまくいくかどうかはわかりませんが、代わりに次を使用します。

.attr("onclick", "")

試す：

.removeAttr("onclick")

それが何かを変えるかどうか私たちに知らせてください。

アップデート：

「より簡単に」機能する方法を示すためにjsFiddleを作成しました：http://jsfiddle.net/S2ARR/3/

その多くは、私の構造を使用するなど、特定の事柄に依存しています-列をすべてに使用する代わりに、列の内部にスパンを配置します。jQuery の選択に要素の id を使用しなかった理由がわからなかったので、要素の id を設定してそれらにアクセスする必要がある場合は、jQuery で id セレクターを使用することもできます。したがって、id を使用しただけの場合、私の例では .parent() または .find() を使用する必要はありません。うまくいけば、これはあなたが探していたものです。重要なのは .stopPropagation() 呼び出しだったと思います。それ以外の場合は機能していないようです。

于 2012-06-27T20:11:55.613 に答える
1

イベントをデリゲートに変更し、テーブルから onclick を削除し、jquery を使用して呼び出しました。しかし、私が得るものがあなたの欲望の行動であるかどうかはわかりません.

jsfiddle

アップデート

こんにちは、私は望ましい動作で更新しました。

解決

于 2012-06-27T20:39:59.550 に答える
0

onclick 属性を介してイベントをバインドする代わりに、jquery を使用してテーブル セルにバインドできます。

$(function(){
    $("#Protocol").click(function(){ 
       // your content
    });
});

そうすれば、後で unbind を使用してイベントをバインド解除できることを保証できます。

于 2012-06-27T19:59:01.593 に答える