Question

我无法让jquery识别从表单更改创建的元素。我有它设置所以当我选择创建一个链接的东西，但当我添加一个单击功能到创建的项目时，什么都不会发生。我怎样才能做到这一点？

$(function() {

var i = $('#nav li').size() + 1;

$('a#add').click(function() {
    $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul');
    i++;
});

$('a#remove').click(function() {
    $('li:last').remove();
    i--;
});


});

html代码

<ul id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<a href="#" id="add">Add List Item</a><br/>
<a href="#" id="remove">Remove LI</a>

Answer 1

您需要使用live来绑定动态创建元素的事件处理程序。您当前的代码将创建多个具有相同ID的html元素，这些元素无效。您可以使用类名来标识src元素。

试试这个：

$(function() {
    var i = $('#nav li').size() + 1;
    $('a.add').live("click", function() {
        $('<li>' + i + '<a href="#" class="add">yes</a></li>').appendTo('ul');
        i++;
    });

    $('a.remove').live("click", function() {
        $('li:last').remove();
        i--;
    });
});

html代码

<ul id="nav">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
</ul>
<a href="#" class="add">Add List Item</a><br/>
<a href="#" class="remove">Remove LI</a>

Answer 2

将你的jquery改为：

$(function() {
    var i = $('#nav li').size() + 1;

    $('a#add').live('click', function() {
        $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul');
        i++;
    });

    $('a#remove').live('click', function() {
        $('li:last').remove();
        i--;
    });
});

Answer 3

你不能在这里使用.click。 .click只是.bind与鼠标事件动作。您必须使用.live

Answer 4

要将事件附加到选择器以及jQuery创建的所有其他事件，您必须使用.live（）函数而不是.click（）简写。

您可以将“点击”事件附加到“添加”链接的代码如下所示：

$('a#add').live('click', function() {
    $('<li>' + i + '<a href="#" id="add">yes</a></li>').appendTo('ul');
    i++;
});

Answer 5

id="add"仅允许每页一个元素。如果你多次使用它，可能会发生奇怪的事情。将您的代码更改为：

$(function() {
    var i = $('#nav li').size() + 1;

    $('a#add').click(function() {
        $('<li>' + i + '<a href="#" class="add">yes</a></li>').appendTo('ul');
        i++;
    });

    $('ul a.add').live('click', function() {
        // handle any link with class "add" that was dynamically added to the ul
    });

    $('a#remove').live('click', function() {
        $('li:last').remove();
        i--;
    });
});

JQuery无法识别创建的元素

5 个答案: