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/