jquery 中的选择器和 .html() 有问题吗？答案

【问题标题】：Issue with selectors & .html() in jquery?jquery 中的选择器和 .html() 有问题吗？
【发布时间】：2009-07-13 20:40:05
【问题描述】：

当我使用 .html() 替换它的内容时，与选择器关联的函数停止工作。由于我无法发布我的原始代码，因此我创建了一个示例来说明我的意思...

jQuery

$(document).ready(function () {
    $("#pg_display span").click(function () {
        var pageno = $(this).attr("id");
        alert(pageno);
        var data = "<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>";
        $("#pg_display").html(data);
    });
});

HTML

<div id="pg_display">
    <span id="page1">1</span>
    <span id="page2">2</span>
    <span id="page3">3</span>
</div>

有什么办法可以解决这个问题吗？？...谢谢

【问题讨论】：

请解释一下你想做什么，我从你的示例代码中无法理解......
我知道您已经接受了答案，但您也可以使用“事件委托”来解决这个问题。

标签： javascript jquery html

【解决方案1】：

我不确定我是否完全理解你，但如果你问为什么 .click() 函数不适用于稍后添加的 span，你需要使用 .live()，

$("#someSelector span").live("click", function(){
  # do stuff to spans currently existing
  # and those that will exist in the future
});

这将为页面上当前的任何元素以及以后创建的任何元素添加功能。它使您不得不在创建新元素时重新附加处理程序。

【讨论】：

【解决方案2】：

替换 HTML 后必须重新绑定事件，因为原来的 DOM 元素会消失。为此，您必须创建一个命名函数而不是匿名函数：

function pgClick() {
  var pageno = $(this).attr("id");
  alert(pageno);
  var data="<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>";
  $("#pg_display").html(data);

  $("#pg_display span").click(pgClick);
}

$(document).ready(function(){
  $("#pg_display span").click(pgClick);
});

【讨论】：

重新绑定是老派。 .live() 对以后创建的任何元素进行自动重新绑定。
我知道，但最好在问题的上下文中说明问题。如果您只是建议 .live() 函数，它并不能真正回答问题。
我不认为你提供了一个糟糕的解决方案。只是年纪稍大的。不过对您 +1，因为您的解决方案确实有效，并且可以很好地解决这个问题。

【解决方案3】：

这是意料之中的，因为附加了点击处理程序的 DOM 元素已被新元素替换。

最简单的补救方法是use 1.3's new "live" events。

【讨论】：

【解决方案4】：

在您的情况下，您可以使用“事件委托”概念并使其发挥作用。

事件委托使用这样一个事实，即在元素上生成的事件将不断冒泡到其父级，除非没有更多父级。因此，您不会将点击事件绑定到跨度，而是会在#pg_display div 上找到点击事件。

$(document).ready(
    function()
    {
        $("#pg_display").click(
            function(ev)
            {
                //As we are binding click event to the DIV, we need to find out the
                //'target' which was clicked. 
                var target = $(ev.target);

                //If it's not span, don't do anything. 
                if(!target.is('span'))
                   return;                

                alert('page #' + ev.target.id);
                var data="<span id='page1'>1</span><span id='page2'>2</span><span id='page3'>3</span>";
                $("#pg_display").html(data);

            }
         );
    }
);

工作演示：http://jsbin.com/imuye

代码：http://jsbin.com/imuye/edit

上面的代码还有一个额外的好处，就是只绑定一个，而不是绑定 3 个事件处理程序。

【讨论】：

【解决方案5】：

使用 $("#pg_display span").live('click', function....) 方法而不是 .click。 Live（在 JQuery 1.3.2 中可用）将绑定到现有和 FUTURE 匹配项，而 click（以及 .bind）函数仅绑定到现有对象而不是任何新对象。您还需要（也许？）将数据与函数分开，否则您将始终在每次点击时添加新的 span 标签。

http://docs.jquery.com/Events/live#typefn

【讨论】：