JQuery AJAX метод повторяется, даже если событие клика не правильно - PullRequest
Новая
       5

JQuery AJAX метод повторяется, даже если событие клика не правильно

1 голос
/ 19 августа 2010

У меня есть некоторый ajax на моей веб-странице, который запускается с помощью события click, рассматриваемый 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, однако, оно просто запускает ранее использовавшийся метод, где, как и должно быть, выполните следующее:1005 *

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.

1 Ответ

0 голосов
/ 21 мая 2012

Ваш код кажется несколько неполным, но я думаю, что могу вам помочь.

Где находится класс .career_select в приведенном вами примере HTML + PHP?Я предполагаю, что .career_select упаковывает .grade_options из-за вашего добавления: $ ('. Hfeed'). Append (html) Я прав?.grade_options был частью html, который был добавлен правильно?

Если я прав, то во вновь добавленном HTML не было бы привязано обработчиков событий заранее, и, следовательно, ваш второй обработчик событий не запускается,Я думаю, что вы можете сделать две вещи:

  1. Объявить новый обработчик события для $ ('. Grade_options .selectitems') в функции успеха первого обработчика события ПОСЛЕ добавления.

Если это не сработает, тогда просто сделайте то, что велел вам Пол Свит (посмотрите на комментарии), отмените привязку исходного события click в обратном вызове успеха или если вы уверены, что это одноразовая вещьПосмотрите на jQuery $ (селектор) .one ().

Надеюсь, это поможет.Если второе работает, пожалуйста, не забудьте дать очки комментарию Пола Свитта.

...