onClick在動態生成的div中不起作用

Question

我有一個jQuery代碼，可以動態生成一個div

問題是標簽的onclick函數未調用所需的函數

這是代碼

$("#new").append('
    <ul class="#...#">
        <li>
            <a href="./d.html?n1='+item[0]+'&n2='+item[2]+'&n3='+item[3]+'">
                <input type="hidden" value='+item[0]+'>
                    <img style="height: 64px; width: 64px;" class="#...#"
                        src="image.png" width="40" height="40" />
                    <span class="#...#">
                        <b>'+item[0]+'</b>
                        '+item[1]+'......
                    </span>
            </a>
            <br />
            <div>
                <a onClick="insert();" href="#">
                    <i class="icon1"></i>
                </a>
                <a href="2.php?q='+q+'&n='+item[0]+'" id="icon2" name="icon2">
                    <i class="icon2"></i>
                </a>
            </div>
        </li>
    </ul>
');

我正在使用上面的代碼作為ajax成功函數

該標簽並沒有叫我搜索的錯誤插入（）函數，但找不到

這是怎么了？ 提前Thsnks

Answer 1

使用JavaScript事件委托來分離關注點：

$(function() {
    $(document.body).on('click', 'ul.someClass div a', function() {
        // insert() method logic goes here
    });
});

第二個參數指定事件目標。 此事件綁定到文檔的正文，因此始終存在。 目標DOM對象可以在以后的某個時間通過AJAX生成或從文檔中刪除。 實際的目標檢查是在用戶實際單擊某項時發生的。

另外，在代碼中將類屬性添加到<div>或<a>可能有助於提高可讀性。 例如：

<div class="buttons">
    <a class="btn-insert" onClick="insert();" href="#">
        <i class="icon1"></i>
    </a>
    <a href="2.php?q='+q+'&n='+item[0]+'" id="icon2" name="icon2">
        <i class="icon2"></i>
    </a>
</div>

然后可以將jQuery on()方法的目標屬性簡化為'.btn-insert'

Answer 2

當您處理動態內容時，建議您使用DOM事件委托。 想法是在動態添加的內容的父級上添加偵聽器

這說明了如何做以及如何工作

http://davidwalsh.name/event-delegate

Answer 3

將自定義類（例如“ catchClick”）添加到您需要捕獲其click事件的元素。

var linkToAdd = '<a class="catchClick" href="#">My link</a>';
var $linkToAdd = $(linkToAdd);
$('#new').append($linkToAdd);

然后，以下代碼將為該元素的點擊設置處理程序。

之所以起作用，是因為click事件是將dom層次結構冒泡到文檔元素的。 因此，您可以將偵聽器附加到document元素。

$(document).on('click', '.catchClick', function(e) {
    // do your stuff here
    // you probably need to get a jquery reference to the element that was clicked:
    var $this = $(this);
    // you probably want to stop the event's default actions so we'll add this:
    e.stopPropagation();
    e.preventDefault();
});

Answer 4

在將新的可單擊項添加到文檔之后，然后在每次將新的可單擊項添加到文檔之后，設置單擊事件處理程序。