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事件不正確

回答

相關問題