引用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创建的元素，注册点击（与小提琴）

回答

相关问题