gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:29:27 26 4
gpt4 key购买 nike

我的网页上有一些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请求工作正常。成功后发生的情况是,我将另一个 View 加载到我的页面中,该 View 有更多的用户交互,可以触发更多的 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 请求的方法的任何原因。

最佳答案

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

您给出的 HTML+PHP 示例中的类 .career_select 在哪里?我的猜测是,由于您的附加, .career_select 正在包装 .grade_options :$('.hfeed').append(html) 我对吗? .grade_options 是附加的 html 的一部分吗?

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

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

如果这不起作用,那么只需执行 Paul Sweatt 指示您执行的操作(查看评论),在成功回调中取消绑定(bind)原始点击事件,或者如果您确定这是一次性的事情,请采取看看 jQuery 的 $(selector).one()。

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

关于javascript - 即使点击事件不正确,jquery ajax 方法也会重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3520162/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com