引用jQuery創建的元素，註冊點擊（與小提琴）

我正在研究一個項目，這將需要用戶能夠添加和編輯標籤。引用jQuery創建的元素，註冊點擊（與小提琴）

在頁面上是：一個div容器，包含標籤，一個文本框（newTag）和一個按鈕（添加標籤），它們將爲容器添加標籤。另一個文本框（editTag）和一個按鈕（更新標籤），用於更新用戶輸入的標籤信息。還有一個選擇列表，可以實時追蹤所有更改。

溫一個用戶點擊一個已經被渲染的標籤，編輯它 - 一切正常。標籤名稱進入編輯文本框，並且標籤在列表中被選中。

當用戶創建標籤被點擊時會出現問題......沒有任何反應。我有一種感覺，它與DOM中的對象有關，但不是呈現HTML。但我不知道如何解決這個問題 - 如何引用一個dom對象的點擊。

這裏是我的代碼：

HTML：

 <!-- tags container --> 
     <div class="container_12"> 
      <div class="grid_2"><img src="images/spacer.png" /></div> 
      <div id="content" class="grid_8"> 
       <button name="PHP" class="tag-button">PHP</button> 
       <button name="CSS" class="tag-button">CSS</button> 

      </div> 
      <div class="grid_2"><img src="images/spacer.png" /></div> 
     </div> 
     <!-- tags container end --> 

     <!-- action buttons container --> 
     <div class="container_12 action-bar"> 
      <div class="grid_4"><img src="images/spacer.png" /></div> 
      <div id="action-add"> 
       <input type="text" name="newTag" id="newTag" /> 
       <input type="button" id="add" value="Add tag" /> 
      </div> 
      <div class="grid_4"><img src="images/spacer.png" /></div> 
      <div id="action-edit"> 
       <input type="text" name="editTag" id="editTag" /> 
       <input type="button" id="update" value="Update tag" /> 
      </div> 
     <!-- action buttons container end --> 
     </div> 

     <!-- Real Time list container --> 
     <div class="container_12"> 
      <div class="grid_4"><img src="images/spacer.png" /></div> 
      <select id="insertString"> 
       <option value="0">PHP</option> 
       <option value="1">CSS</option> 
      </select> 
     </div> 
<!-- real time list container end -->

的jQuery：

 //button add click 
     $('#add').click(function() { 
      //creating a new tag for the tag bar 
      var tag = $('#newTag').val(); 
      var tagHTML=$('<button name= "' + tag + '" class="tag-button">'+ tag + '</button>'); 
      var qString = ""; 
      // adding the tag to the bar 
      $("#content").append(tagHTML); 

      //get last value in the list 
      var lastValue = $('#insertString option:last-child').val(); 
      if (! lastValue) {lastValue = 0;} 
      else {lastValue = ++ lastValue; } 
      //add new option for the new tag 
      $('<option value="' + lastValue + '">' + tag + '</option>').appendTo("#insertString") 
     }) 

     //tag button click 
     $(".tag-button").click(function(){ 
      var name = $(this).attr('name'); 

      //add the tag name to the editTag textbox 
      $('#editTag').val(name); 

      $('#insertString option:contains("'+ name + '")').attr('selected', true); 
     });

而且，這裏是我的小提琴： http://jsfiddle.net/Lm3ab/

幫助將感激，謝謝你爲你的時間。

來源

2014-02-13 wribit

您需要使用Event Delegation。您必須使用委託事件方法使用.on()。

使用

$("#content").on("click", ".tag-button", function() {

DEMO

來源

2014-02-13 20:19:35 Satpal

甜蜜，非常感謝你！ – wribit

無價的信息 - 我真的很感激它Satpal – wribit

@wribit，很高興能幫到你。好好學習吧 – Satpal

添加另一點擊，從而

$("#content").on("click", ".tag-button", function(){});

http://jsfiddle.net/Lm3ab/1/

來源

2014-02-13 20:19:18

，當然還有，你的作品，以及 - 感謝您的時間保羅！ – wribit

事件代表團，因爲這些標籤並沒有在網頁上，被綁定的click事件的時候，他們沒有聽衆。將點擊事件綁定到容器並定位元素：

$("#content").on("click", ".tag-button", function() {

來源

2014-02-13 20:19:22 tymeJV

它的工作原理 - 感謝一羣 – wribit

引用jQuery創建的元素，註冊點擊（與小提琴）

回答

相關問題