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： $（'。hfeed'）。追加（html）我是否正确？ .grade_options是附加的html的一部分吗？

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

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

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

我希望这会有所帮助。如果第二个有效，请记得给Paul Sweatte发表评论。

即使点击事件不正确，也会重复jquery ajax方法

1 个答案: