Javascript 选择器问题&。jquery中的html（）？

当我使用.html（）替换选择器的内容时，与选择器关联的函数将停止工作。因为我不能发布我的原始代码，所以我创建了一个示例来说明我的意思

Jquery

$（文档）.ready（函数（）{
$（“#pg_显示范围”）。单击（函数（）{
var pageno=$（this.attr（“id”）；
警报（页码）；
var data=“1 2 3”；
$（“#pg_display”）.html（数据）；
});
});

HTML

1.
2.
3.

---

有什么办法可以解决这个问题吗？？？…谢谢，我不确定我是否完全理解你，但是如果你问为什么。click（）函数在以后添加的跨距上不起作用，你需要使用

---

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

在替换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);
});

函数pgClick（）{ var pageno=$（this.attr（“id”）； 警报（页码）； var data=“1 2 3”； $（“#pg_display”）.html（数据）； $（“#pg_显示范围”）。单击（pgClick）； } $（文档）.ready（函数（）{ $（“#pg_显示范围”）。单击（pgClick）； }); 使用$（“#pg_display span”）.live（'click'，function…）方法代替.click。Live（在JQuery 1.3.2中提供）将绑定到现有和未来的匹配项，而click（以及.bind）函数仅绑定到现有对象，而不是任何新对象。您还需要（可能？）将数据与函数分开，或者每次单击时都会添加新的span标记

---

这是意料之中的，因为连接了click处理程序的DOM元素已被替换为新元素

---

最简单的补救办法是。

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

事件委派使用一个事实，即在元素上生成的事件将一直冒泡到其父级，除非没有更多的父级。因此，您将在#pg#u display div中找到单击事件，而不是将单击事件绑定到span

$(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);

            }
         );
    }
);

$（文档）。准备好了吗(
函数（）
{
$（“#pg_显示”）。单击(
功能（ev）
{
//当我们将click事件绑定到DIV时，我们需要找出
//已单击的“目标”。
var目标=$（ev.target）；
//如果不是span，不要做任何事情。
如果（！target.is（'span'））
返回；
警报（'page#'+ev.target.id）；
var data=“123”；
$（“#pg_display”）.html（数据）；
}
);
}
);

工作演示：

代码：

---

上面的代码还有一个额外的优点，即它不绑定3个事件处理程序，而是只绑定一个事件处理程序

请解释你想做什么，我无法从你的示例代码中真正理解…我知道你已经接受了答案，但你也可以利用“事件委派”来解决这个问题。重新绑定是一种老生常谈。live（）会为以后创建的任何元素自动重新绑定。我知道，但最好在问题的上下文中说明问题。如果您只是建议使用.live（）函数，它并不能真正回答问题。我认为您提供的解决方案并不差。只是稍微老一点的+1但是，因为您的解决方案确实有效，并且可以很好地解决此问题。

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

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);
});

$(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);

            }
         );
    }
);