jQuery的。對（「點擊」，FUNC）函數沒有做的工作

點擊現有的觸發鏈接 - 「增加觸發有事（通過）
點擊「按鈕，添加一個新的扳機連桿瓦/同班
點擊新創建的鏈接，它不會做同樣的事情，是從一開始就存在的第一個2個鏈接（失敗）

這是我的例子 - ：http://jsbin.com/equjig/3/edit

我認爲.on('click', func)函數適用於向dom中的當前元素添加事件，但也適用於未來添加到dom中的元素？

這裏是我當前的javascript：

$(document).ready(function() { 
    $(".link").on('click', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 

    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    });

這裏是HTML

<button type="button" id="b1">add trigger</button> 
    <p id="p1"> 
    <a href="#" class="link">trigger 1</a> 
    <a href="#" class="link">trigger 2</a> 
    </p> 
    <div id="out"></div>

注 - 使用jQuery 1.7

由於IM！

來源

2011-11-29 Ian Davis

哇，顯然沒有人知道，jQuery 1.7棄用直播。沒有更多的現場答案！ – mrtsherman

@mrtsherman或者沒有人覺得去jsbin是合理的，檢查OP正在使用的jQuery版本，並將其與另外三個版本加以區分。我的猜測是不少人知道的，但往往依賴更完整的問題 - 我認爲這是合理的。問題應該包括版本和代碼，特別是當這個簡短的時候。 –

@DᴀᴠᴇNᴇᴡᴛᴏɴ - 我認爲這很清楚。「開」在1.7之前根本不存在，所以他不得不使用它。他提供了他使用的代碼'.on（'click'，func）' – mrtsherman

你幾乎沒有關於...

工作示例：http://jsbin.com/equjig/6/edit

$(document).ready(function() { 
    $('#p1').on('click','.link', function(e) { 
     e.preventDefault(); 
     $("#out").append("clicked<br/>"); 
    }); 
});

這將工作 - 你應該選擇.link元素（我對你的jsbin使用$('#p1')這裏，等）父DIV

來源

2011-11-29 18:47:33 ManseUK

@Jasper - 感謝您的更新 – ManseUK

onclick事件僅適用於已存在的元素。您需要使用.live功能。

來源

2011-11-29 18:46:05 EmCo

直播 – mrtsherman

@mrtsherman：謝謝你的信息！不知道。 – EmCo

.on()也可以表現得像.delegate()它這樣使用：

//#p1 is the context and .link is what will be bound to as long as the .link element is a descendant of #p1 
$('#p1').on('click', '.link', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
});

下面是.on()文檔：http://api.jquery.com/on

來源

2011-11-29 18:46:39 Jasper

+1 - 很多錯誤的答案很難找到正確的答案！ – mrtsherman

按照API文檔on簽名.on('click', func)複製.bind的行爲 - 這就是說，它將收聽者綁定到收藏中的每個現有元素。

要獲得.delegate行爲 - 即綁定到每個從特定種類（子）元素的起源事件，包括選擇：

$("parent-selector").on('click', 'your-selector', func)

來源

2011-11-29 18:46:55

@Ian Davis - 當然，你需要確保你使用的是1.7 - 'on'在早期版本的jQuery中不存在。 –

+1 - 很好的答案。在OP的情況下，這樣的東西會工作 - '$（「＃p1」）。on（'click'，'.link'，function（e）' – mrtsherman

他是....檢查jquery hes使用 - >/*！jQuery v1.7.1 jquery.com | jquery.org/license */ – ManseUK

-2

更改。對（）來。生活（）

$(document).ready(function() { 
    $(".link").live('click', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 

    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    }); 
});

來源

2011-11-29 18:47:08

'.live（）'被折舊爲jQuery 1.7。 – Jasper

您可以使用.on()從1.7版本，它也有些替代除了你如何提供語法之外，舊的.live()。

使用.on()您可以將事件委託給任何像這樣的父元素：

$(document.body).on('click','.link',function() { 
    // handler for all present and future .link elements inside the body 
});

這樣，它也將工作對於那些具有的className「link」體內加入未來的因素。

我對你的皮棉做了一個小的修改，它的工作方式如下：http://jsbin.com/adepam。這裏是代碼：

$(document).ready(function() { 
    $(document.body).on('click', '.link', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 
    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    }); 
});

來源

2011-11-29 18:55:24 David

jQuery的。對（「點擊」，FUNC）函數沒有做的工作

回答

相關問題