Jquery - 使用 $(this).attr( "id" ) 使点击侦听器停止工作

Question

我有一个民意调查创建者，可以有几个问题。为了简单起见，我的脚本有一个问题计数器来帮助对每个问题的选择进行分组。但这意味着当我创建新问题时，我无法再为以前的问题添加选项，否则它们将被错误地分组。

所以我为每个add_choice按钮添加一个 id，每个问题中一个

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函数中，我使用了

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

为了对问题的选择进行分组，因为add_choice按钮将与我要添加选择的问题具有相同的 id。但是当我使用它的那一刻，addQuestion 函数停止工作。甚至警报（）也不会做任何事情。我是否错误地使用了它，或者这是其他问题的征兆？

Answer 1

你的方法在概念上是错误的。

1. 应使用事件委派。
2. 您不需要全局元素计数器变量。摆脱它们。
3. 您有重复的元素，但不使用唯一的 HTML ID。使它们独一无二或摆脱它们。
4. 您需要一个模板解决方案。

这是一种解决所有四点的方法。我使用车把作为模板引擎。

首先，您必须定义 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/