1

我的网页上有一些 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 请求的方法的任何原因。

4

1 回答 1

0

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

.career_select您给出的 HTML+PHP 示例中的类在哪里？我的猜测是由于您的附加而导致 .career_select包装： $('.hfeed').append(html)我正确吗？ 是附加的html的一部分吗？.grade_options.grade_options

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

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

如果这不起作用，那么就按照 Paul Sweatte 的指示去做（查看评论），取消绑定成功回调中的原始点击事件，或者如果您确定它是一次性的，请查看 jQuery 的$(选择器).one()。

我希望这有帮助。如果第二个有效，请记得给 Paul Sweatte 的评论加分。

于 2012-05-21T05:33:19.547 回答