Jquery的 - 使用$（本）.attr（“ID”），使点击监听器停止工作

Question

我有一个民意调查创建者，可以有几个问题。为了简单起见，我的脚本有一个问题柜台来帮助分组每个问题的选择。但是这意味着当我创建一个新问题时，我不能再为以前的问题添加选择，否则他们会被错误地分组。

所以我在每一个问题

function addChoice(){ 
    $(this).before('<p><input id="choice" name="option' + question_counter + '[]" type="text" placeholder="Enter Choice"/>' + 
         '<a title="Delete Choice" id="' + question_counter + '"class="delete_choice" href="#question_container">AAA</a>' + 
         '</p>'); 
    $(".delete_choice").click(deleteChoice); 
} 

function addQuestion(){ 
    question_counter++; 
    $(".add_choice").remove(); 
    $(this).before('<fieldset class="new_question"><legend id="legend_' + question_counter + '">Question ' + question_counter + '</legend>' + 
        '<p class="questionbar">' + 
        '<label for="question_title">Question Title</label><br>' + 
        '<input class="questionbar" type="text" placeholder="Question Title" name="question_title_' + question_counter +'" required><br>' + 
        '</p>' + 
        '<div class="choice_container">' + 
        '<p id="' + question_counter + '"class="add_choice"><a title="Add New Choice" href="#question_container"><span><img src="images/add_choice_icon.png" style="width:30px; height:30px"></span></a></p>' + 
        '</div>' + 
        '<p class="delete_question"><a title="Delete Question" href="#"><span><img src="images/delete_icon.png" style="width:30px; height:30px"></span></a></p>' + 
        '</fieldset>'); 

    $(".questionbar").keyup(addQuestionTitle); 
    $(".delete_choice").click(deleteChoice); 
    $(".delete_question").click(deleteQuestion); 
    $(".add_choice").click(addChoice); 
} 

所以在我addChoice功能添加了一个ID为每个add_choice按钮，一个，我用

var cid = $(this).attr("id"); 

为了组选择的问题，因为add_choice按钮与我想要添加选项的问题具有相同的id。 但是现在我使用这个，addQuestion函数停止工作。即使alert（）也不会做任何事情。 我是否错误地使用了它，或者这是其他问题的标志？

Answer 1

你的做法是错误的概念上。

1. 您应该使用事件委托。
2. 你不需要全局元素计数器变量。摆脱他们。
3. 你有重复的元素，但不使用独特的HTML标识。使他们独特或摆脱他们。
4. 您需要一个模板解决方案的。

下面是一个解决所有四点的方法。我用Handlebars作为模板引擎。

首先，你必须定义HTML模板：

<script id="question-template" type="text/x-handlebars-template"> 
    <fieldset class="new_question" data-num="{{num}}"> 
     <legend>Question {{num}}</legend> 
     <p class="questionbar"> 
      <label for="question_title_{{num}}">Question Title</label><br> 
      <input class="questionbar" type="text" placeholder="Question Title" id="question_title_{{num}}" name="question_title_{{num}}" required /></br> 
     </p> 
     <div class="choice_container"> 
      <p id="question_{{num}}" class="add_choice"> 
       <a title="Add New Choice" href="#question_container"> 
        <span><img src="images/add_choice_icon.png" alt="Add Choice" /></span> 
       </a> 
      </p> 
     </div> 
     <p class="delete_question"> 
      <a title="Delete Question" href="#" class=".delete_question"> 
       <span><img src="images/delete_icon.png" alt="Delete" /></span> 
      </a> 
     </p> 
    </fieldset> 
</script> 

<script id="choice-template" type="text/x-handlebars-template"> 
    <p class="choice"> 
     <input id="choice" name="option_{{num}}[]" type="text" placeholder="Enter Choice"/> 
     <a title="Delete Choice" class="delete_choice" href="#question_container">Delete Choice</a> 
    </p> 
</script> 

然后你就可以使用它们。

// compile templates 
var choiceTemplate = Handlebars.compile($("#choice-template").text()); 
var questionTemplate = Handlebars.compile($("#question-template").text()); 

// define event handlers 
// ... 

// attach event handlers via event delegation dele 
$(document) 
.on("click", "#addQuestion", addQuestion) 
.on("click", ".delete_question a", deleteQuestion) 
.on("click", ".questionbar", addQuestionTitle) 
.on("click", ".add_choice a", addChoice) 
.on("click", ".delete_choice", deleteChoice); 

// done 

亲身体验：http://jsfiddle.net/Tomalak/jkyvwbb2/1/