2017-01-21 31 views
0

我正在構建一個用戶可以點擊「選項」列表中的項目並將其添加到「選定」列表的用戶界面。對jQuery中的點擊按鈕沒有任何操作

「選定」列表上的項目有一個刪除按鈕,可將其發送回「選項」列表。我只是無法使刪除按鈕工作。我已將刪除按鈕的操作限制爲簡單的警報以進行故障排除。

任何人都可以看到我做錯了什麼?

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){ 
 
    \t var li = $('<li/>') 
 
      .addClass('ui-menu-item-'+a[i]) 
 
      .attr('role', 'menuitem') 
 
      .appendTo(cList); 
 
     var aaa = $('<a/>') 
 
      .addClass('ui-all') 
 
      \t .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>

+0

我的問題已被標記爲重複:動態創建的元素上的事件綁定?我已經閱讀過這個問題,我正在嘗試應用它。我正在尋找我在代碼中做錯的具體幫助。 –

回答

1

此代碼

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

只增加了事件處理程序的按鈕與類「刪除」是存在於該代碼被執行(該頁面後時間加載)。它不適用於之後創建的按鈕。

解決方案:創建它之後,將函數調用添加到每個按鈕。使用一個命名的函數,以便您可以重用它。