jquery ajax方法被重复，即使单击事件不正确

Question

我的网页上有一些Ajax，是通过点击事件触发的，有问题的javascript看起来像这样，

$('.career_select .selectitems').click(function(){
        var selectedCareer = $(this).attr('id');
        $.ajax({
            type: 'POST',
            url: '/roadmap/step_two',
            data: 'career_choice='+selectedCareer+"&ajax=true&submit_career=Next",
            success: function(html){
                $('.hfeed').append(html);
                buildSelects();
                $('.grade_options .selectitems').addClass('select_1')
              }
        });
    });

ajax请求的这一部分工作正常。 成功的结果是，我在页面上加载了另一个视图，该视图具有更多的用户交互，从而触发了更多的ajax，但是，它只是触发了以前使用的方法，因此应执行以下操作：

    $('.grade_options .selectitems').click(function(){
    var selectedGrade = $(this).attr('id');
    alert(selectedGrade);
})

HTML + PHP看起来像这样，

<div class="grade_options">
        <input value="" name="grade" class="customselect" type="hidden">
        <div class="iconselect">Have you got any of the following?</div>
        <div style="display: none;" class="iconselectholder"> 
        <div class="selectoptions"> 
            <div id="1" class="selectitems hoverclass selectedclass select_1">
                <span>Accountant</span>
            </div>
            <div id="2" class="selectitems">
                <span> Grade D's at GCSE including English and Maths</span>
            </div>
            <div id="3" class="selectitems">
                <span>3 GCSE's at grade B and 3 GCSEs at grade C or equivalent and you must have achieved at least a grade C in GCSE English Language &amp; B in Maths</span>
            </div>
        </div>
</div>
                <noscript>
                    <input type="submit" value="Next" name="submit_grades" class="arr" />
                </noscript>
</div>

.selectitems使用此插件从选择菜单中创建，

    $.fn.customSelect = function() {
  // define defaults and override with options, if available
  // by extending the default settings, we don't modify the argument
 return this.each(function() {  
 obj = $(this);  
obj.after("<div class=\"selectoptions\"> </div>");
obj.find('option').each(function(i){ 
  $(".selectoptions").append("<div id=\"" + $(this).attr("value") + "\" class=\"selectitems\"><span>" + $(this).html() + "</span></div>");
});
obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" class=\"customselect\"/><div class=\"iconselect\">" + this.title + "</div><div class=\"iconselectholder\"> </div>")
.remove();
$('.iconselectholder').hide();
$(".iconselect").click(function(){
$(".iconselectholder").toggle("slow");});
    $(".iconselectholder").append( $(".selectoptions")[0] );
$(".selectitems").mouseover(function(){
    $(this).addClass("hoverclass");
});
    $(".selectitems").mouseout(function(){
    $(this).removeClass("hoverclass");
    });
    $(".selectitems").click(function(){
    $(".selectedclass").removeClass("selectedclass");
    $(this).addClass("selectedclass");
    var thisselection = $(this).html();
$(".customselect").val(this.id);
    $(".iconselect").html(thisselection);
    $(".iconselectholder").toggle("slow")
    });
    });  
  // do the rest of the plugin, using url and settings
}

我正在努力查看为什么我的第二个ajax请求正在运行第一个ajax请求的方法的任何原因。

Answer 1

您的代码似乎不完整，但我想可以为您提供帮助。

您提供的HTML + PHP示例中的.career_select类在哪里？ 我的猜测是由于您的附加， .career_select正在包装.grade_options ： $（'。hf​​eed'）。append（html）我正确吗？ .grade_options是附加正确的html的一部分？

如果我是正确的，那么新附加的HTML不会事先绑定事件处理程序，因此您的第二个事件处理程序不会触发。 我认为您可以做两件事：

1. 在追加之后，在第一个事件处理程序的成功函数中声明$（'。grade_options .selectitems'）的新事件处理程序。

如果那行不通，那么就按照保罗·斯威特（Paul Sweatte）的指示去做（看注释），在成功回调中取消绑定原始的click事件，或者如果您确定这是一次性的，请看一下jQuery的内容。 $（选择器）.one（）。

我希望这有帮助。 如果第二个有效，请记住对保罗·斯威特的评论要点。