jQuery的AJAX方法虽然click事件不正确

我有我的网页上一些Ajax，即通过点击事件触发，有问题的JavaScript看起来像这样，jQuery的AJAX方法虽然click事件不正确

$('.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请求的方法。

来源

2010-08-19 sea_1987

设置您的HTML格式，以便我们能够更好地帮助您 – 2010-08-19 09:01:33

新的HTML不嵌套在.career_select .selectitems div中吗？ – Chris 2010-08-19 09:21:32

没有关注您，.select项目嵌套在.grade_options中 – 2010-08-19 09:24:09

你的代码似乎有些不完整，但我想我可以帮助你。

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

如果我是正确的，那么新添加的HTML将不会有事件处理程序提前绑定到它，因此您的第二个事件处理程序不会触发。我认为你可以做两件事：

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

如果这样做不起作用，那么只要做一下Paul Sweatte指示你做的事情（看看评论），解除成功回调中的原始点击事件，或者如果你确定它是一次性的事情，看看jQuery的$（选择器）.one（）。

我希望这会有所帮助。如果第二个工作，请记住给Paul Sweatte的评论。

来源

2012-05-21 05:33:19 Mark

jQuery的AJAX方法虽然click事件不正确

回答

相关问题