動態添加偵聽器到jQuery創建的內容

我想獲取鏈接點擊的html值。這些鏈接使用Ajax動態創建的，所以我不認爲.bind將的工作，我沒有最新版本的.live動態添加偵聽器到jQuery創建的內容

$('div#message').click(function() { 
    var valueSelected = $(this).html(); // picks up the whole id. I juust want single href!   
    alert(valueSelected); 
    return false; 
}); 



<div id="message"> 
<br/> 
<a class="doYouMean" href="#">location A</a> 
<br/> 
<a class="doYouMean" href="#">location B</a> 
<br/> 
<a class="doYouMean" href="#">location C</a> 
<br/> 
<a class="doYouMean" href="#">location D</a> 
<br/> 
<a class="doYouMean" href="#">location E</a> 
<br/> 
</div>

來源

2010-03-31 davidP

應用處理程序，只是鏈接，在的回調AJAX負載。

$('div#message').load(myUrl, function() { 
    $('div#message a').click(function() { 
     var valueSelected = $(this).html(); 
     alert(valueSelected); 
     return false; 
    }); 
});

來源

2010-03-31 12:17:11 tvanfosson

您有2個選項 -

使用的liveQuery插件，它是我們使用.live沿
來重新綁定你的函數每個成功的Ajax調用後點擊事件之前。（推薦）

來源

2010-03-31 12:17:24

＃2的伎倆！ – davidP 2010-03-31 13:44:27

你真的應該使用最新的版本，如果你能幫助它。

如果它正在使用AJAX添加了「.doYouMean」元素，#message是永遠存在的，嘗試：

$('#message').bind('click', function (event) { 
    var target = event.currentTarget; 
    if ($('.doYouMean').filter(target)) { 
    // target is the .doYouMean that was clicked: Handle here 
    }; 
});

（此作品：http://www.jsfiddle.net/SuVzv/）

來源

2010-03-31 12:18:01 Matt

其他解決方案是一個功能點擊重新初始化，因爲你可能有其他情況，如我有:)，所以邏輯可如下：

$(document).ready(function() { 
    initsomething(); 
}); 

function initsomething(){ 
    ....... 
    $('div#message').click(function() { 
    var valueSelected = $(this).html(); // picks up the whole id. I juust want single href!   
    alert(valueSelected); 
    return false; 
    }); 
    ....... 
}

Ajax的成功運行initsomething（）:)

來源

2011-04-13 12:53:36 Anton

這裏尚未提及的另一種方法：

如果你使用jQuery的V1.7 +可以使用.on()方法來綁定事件偵聽器當前HTML以及HTML是在未來補充說：

$('#message a').on('click', function(){ 
    alert('link clicked!'); 
});

如果您在使用jQuery的舊版本，建議您使用.delegate()方法來代替：

$('#message').delegate('a', 'click', function(){ 
    alert('link clicked!'); 
});

總結：

$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(elements).on(events, selector, data, handler);  // jQuery 1.7+

來源

2012-01-12 17:51:55 Andrew

我喜歡這種方式比第一種方式更好，因爲它使您可以選擇將「事件偵聽器」用於「常規」和ajax的內容。在第一個答案中，它假定你只需要這個監聽器一次。 – Susan 2012-03-30 02:52:12

你的方法不能用asychrone div創建...只是在div已經存在的情況下 – ZelkiN 2015-07-22 11:53:52

也許遲到和重複的答案，但，這可能是一晚，但這是我做什麼，當我需要AJAX。

$(document).ready(function() { 
$(document.body).on('click', '.Selector_S', function() { function_F(event, this) }) 
} 

function function_F(event, d){ 
...do sth here... 
}

而且你不需要重新啓動事件監聽器或者在ajax函數中寫入任何東西。

來源

2013-07-12 19:31:17

動態添加偵聽器到jQuery創建的內容

回答

相關問題