Question

我正在构建一个用户界面，用户可以点击“选项”列表中的项目并将其添加到“已选择”列表中。

“已选择”列表中的项目有一个删除按钮，可将其发送回“选项”列表。我只是无法让删除按钮工作。我已将删除按钮的操作限制为简单警报以进行故障排除。

谁能看到我做错了什么？

PS。我的问题被标记为重复：动态创建元素的事件绑定？我已经阅读了这个问题，我正在尝试应用它。我正在寻找有关我在代码中出错的具体帮助。

$(document).ready(function(){

var a = [];
$(".remove").click(function(){
    alert("Remove Clicked");
});

$(".select").click(function(){
    var cList = $('ul.mylist');
    $('ul.mylist').empty();
    $('ui-menu-item').empty();
    a.push($(this).next("span").text());
    $(this).closest("li").hide();
    $( "#s" ).text( a.join( " " ));
    
    $.each(a, function(i){
    	var li = $('<li/>')
            .addClass('ui-menu-item-'+a[i])
            .attr('role', 'menuitem')
            .appendTo(cList);
        var aaa = $('<a/>')
            .addClass('ui-all')
           	.text(a[i])
            .appendTo(li);
        var $input = $('<button class="remove">Remove</button>');
            $input.prependTo($("li.ui-menu-item-"+a[i]));
   });
});   
});

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selector</title>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
<h2>List of Options</h2>
<ul>
    <li><button class="select">Select</button><span>One</span></li>
    <li><button class="select">Select</button><span>Two</span></li>
    <li><button class="select">Select</button><span>Three</span></li>
    <li><button class="select">Select</button><span>Four</span></li>
</ul>
<h2>List of Selections</h2>
<ul class="mylist"> 
</ul>
<h3>Array of Selected Items to Sent to DB:</h3>
<span ID="s"></span>
</body>
</html>

Answer 1

此代码

$(".remove").click(function(){
    alert("Remove Clicked");
});

仅将事件处理程序添加到具有“删除”类的按钮，该类在执行代码时存在（在页面加载之后）。它不适用于之后创建的按钮。

解决方案：在创建后为每个按钮添加函数调用。使用命名函数，以便重用它。

jQuery中单击按钮没有任何操作

1 个答案: