问题与选择器＆.html（）在jQuery中？

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

的Jquery：问题与选择器＆.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 >

是他们的任何方式解决这个?? ...谢谢

来源

2009-07-13 halocursed

请解释你想做什么，我不能从你的示例代码真正理解... – Blixt 2009-07-13 20:45:23

我知道你已经接受了答案，但你也可以利用'事件代表'来解决这个问题。 – SolutionYogi 2009-07-13 21:04:20

不知道我完全理解你，但如果你问为什么.click（）函数不工作在s以后添加平底锅，你需要使用.live()，

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

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

来源

2009-07-13 20:42:54 Sampson

感谢人正是我正在寻找... – halocursed 2009-07-13 20:56:21

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

来源

2009-07-13 20:45:53

使用$（“＃pg_display跨度”）生活（“点击”，功能....）方法，而不是。点击。 Live（在JQuery 1.3.2中可用）将绑定到现有和FUTURE匹配，而click（和.bind）函数仅绑定到现有对象，而不是任何新的。您还需要（也许是？）将数据从函数中分离出来，或者每次点击时都会添加新的span标签。

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

来源

2009-07-13 20:46:54 nopuck4you

这是可以预料的，因为这有你的点击处理程序连接的DOM元素都换成了新的。

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

来源

2009-07-13 20:47:08

在你的情况下，你可以使用'事件委托'的概念，并使其工作。

事件委托使用的事实是，一个元素上产生的事件将继续冒泡到其父，除非没有更多的父母。因此，不需要将点击事件绑定到跨度，您会在#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个的事件处理程序，它仅结合一个。

来源

2009-07-13 21:03:36 SolutionYogi

问题与选择器＆.html（）在jQuery中？

回答

相关问题