問題與選擇器＆.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中？

回答

相關問題