1

クリックイベントを介してトリガーされるajaxがWebページにあります。問題の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
}

2番目のajaxリクエストが最初のajaxリクエストのメソッドを実行している理由を確認するのに苦労しています。

4

1 に答える 1

0

あなたのコードはやや不完全に見えますが、私はあなたを助けることができると思います。

.career_selectあなたが与えたHTML+PHPの例のクラスはどこにありますか？私の推測では、それ.career_selectは.grade_optionsあなたの追加のために折り返されていると思います： $（'。hf​​eed'）。append（html）私は正しいですか？ .grade_options正しく追加されたhtmlの一部でしたか？

私が正しければ、新しく追加されたHTMLには事前にイベントハンドラーが関連付けられていなかったため、2番目のイベントハンドラーは起動しません。私はあなたができることが2つあると思います：

  1. 追加後の最初のイベントハンドラーのsuccess関数で、$（'。grade_options.selectitems'）の新しいイベントハンドラーを宣言します。

それがうまくいかない場合は、Paul Sweatteが指示したことを実行して（コメントを見て）、成功コールバックで元のクリックイベントのバインドを解除するか、それが1回限りのことであることが確実な場合は、jQueryを見てください。 $（selector）.one（）。

これがお役に立てば幸いです。2つ目が機能する場合は、PaulSweatteのコメントにポイントを与えることを忘れないでください。

于 2012-05-21T05:33:19.547 に答える