2

问题：

我在使用 jQuery 时遇到了一点问题：考虑一下这个 HTML，我想在其中左键单击“https”，更改它的值，然后单击确定。确定后，它应该删除文本框，并重新附加 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 似乎无法解除内联事件处理程序的绑定：Unbinding inline onClick not working in jQuery?

所以我不确定它是否会起作用，但不要使用：

.attr("onclick", "")

尝试：

.removeAttr("onclick")

让我们知道这是否会改变任何事情。

更新：

我制作了一个 jsFiddle 来向您展示它如何“更轻松”地运行：http: //jsfiddle.net/S2ARR/3/

其中很多取决于某些事情，例如使用我的结构 - 在列内放置一个跨度而不是对所有内容使用该列。我没有使用元素的 id 进行 jQuery 选择，因为我不确定您为什么不使用 - 如果您设置了元素的 id 并且需要访问它们，那么您不妨在 jQuery 中使用 id 选择器。因此，如果您只使用 id，则在我的示例中不需要使用 .parent() 或 .find() 。希望这就是你要找的。我认为重要的是 .stopPropagation() 调用，否则它似乎不起作用。

于 2012-06-27T20:11:55.613 回答
1

我将您的事件更改为委托，从表中删除 onclick 并使用 jquery 调用它。但是我不确定我得到的是你的欲望行为。

jsfiddle

更新

嗨，我更新了所需的行为。

解决方案

于 2012-06-27T20:39:59.550 回答
0

您可以使用 jquery 将其绑定到表格单元格，而不是通过 onclick 属性绑定事件。

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

然后，您可以保证以后可以使用 unbind 取消绑定事件。

于 2012-06-27T19:59:01.593 回答