Функция вызова Jquery не вызывается

Question

Функция вызова Jquery не вызывается

0

У меня есть эта функция в моем файле global.js, код ниже:

$("a.dialog-page").click(function(event) {

          event.preventDefault();
          $this = $(this);

          var URL     = $(this).attr('href');
          var dialogbox = document.getElementById('dialog');
          var dialogOptions = {

                        width: 500,
                        height: 200,
                        modal: true,
                        close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

    if(dialogbox==null) {
        $this.after("<div id=\"dialog\"></div>");

    }

    jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);

});

У меня есть динамически созданный HTML со следующей разметкой:

<div id="dynamic-id">
  <a class="dialog-page" href="/test/test.php">Link to test</a>
</div>

Вот триггер для этой ссылки, исходящий из моего файла local.js:

  $('#dynamic-id').on('click', 'a.dialog-page', function(event){        
    event.preventDefault;
  });

Проблема заключается в том, что при нажатии на ссылку он не вызывает ("a.dialog-page"). Click event, который загрузит мое модальное окно.

Как я могу это ответить?

Спасибо, спасибо!

Moxie C 02 май 2014, в 20:28

Источник

0

Весь ваш код обработчика событий должен быть внутри кода, который вы называете «триггером щелчка» вместо первой функции.
Pointy 02 май 2014, в 18:08
0

У вас есть 2 обработчика кликов для одного и того же селектора a.dialog-page! Просто используйте один из предложенных @Pointy.
DevDude 02 май 2014, в 18:12
0

@Pointy, что вы подразумеваете под триггером клика. Вы имеете в виду размещение кода внутри $ ('# dynamic-id'). On ('click', 'a.dialog-page', function (event) {// code in here});
Moxie C 02 май 2014, в 20:26

Показать ещё 1 комментарий

Теги:

javascript

jquery

binding

onclick

5 ответов

Ещё вопросы

Весь ваш код обработчика событий должен быть внутри кода, который вы называете «триггером щелчка» вместо первой функции.
У вас есть 2 обработчика кликов для одного и того же селектора a.dialog-page! Просто используйте один из предложенных @Pointy.
@Pointy, что вы подразумеваете под триггером клика. Вы имеете в виду размещение кода внутри $ ('# dynamic-id'). On ('click', 'a.dialog-page', function (event) {// code in here});

Felix · Answer 1 · 2014-05-02T15-45-00.000Z

Поскольку #dynamic-id также генерируется динамически, вам нужно использовать другое статическое родительское body:

$('body').on('click', 'a.dialog-page', function(event){        
    event.preventDefault;
});

тоже пробовал и к сожалению, тоже не работает

maj · Answer 2 · 2014-05-02T15-32-00.000Z

Динамический идентификатор элемента # также генерируется динамически.

Поэтому, когда вы привязываете элемент, элемент # dynamic-id не существует в DOM, пока вы привязываете событие к нему.

Чтобы исправить это, вы можете использовать следующее

$(document).on('click', 'a.dialog-page', function(event){        
    alert("Link clicked");
    event.preventDefault;
});

Я пробовал это, но это не работает. Предупреждение не отображается, и оно просто переходит на страницу test.php
Используете ли вы оба события клика? $ ("a.dialog-page"). click (функция) $ (document) .on ('click', 'a.dialog-page', function); Если да, используйте только второй
Если проблема не в этом, не могли бы вы добавить ссылку, чтобы мы могли проверить?

Gary Schreiner · Answer 3 · 2014-05-02T16-09-00.000Z

Для меня это похоже на то, что вы определяете событие клика статически, которое никогда не запускается тегом A, поскольку оно не привязано к динамическому контенту, а затем определяет и прикрепляет новый клик после загрузки динамических данных, который только останавливает событие, Я бы поменял его на это, также как и замечание по Pointy:

<div id="dynamic-id">
  <a class="dialog-page" href="/test/test.php">Link to test</a>
</div>

$('#dynamic-id').on('click', 'a.dialog-page', function(event){        
        event.preventDefault();
          $this = $(this);

          var URL     = $(this).attr('href');
          var dialogbox = document.getElementById('dialog');
          var dialogOptions = {

                        width: 500,
                        height: 200,
                        modal: true,
                        close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

    if(dialogbox==null) {
        $this.after("<div id=\"dialog\"></div>");

    }

    jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);
  });

Jeremy Gehrs · Answer 4 · 2014-05-02T15-49-00.000Z

Вам просто нужно настроить таргетинг на элемент, который существует в pageload, и использовать функцию on()

$('#container').on('click', '.element', function(){ });

То, как вы изначально пытались это сделать, прослушиватель кликов не устанавливается, поскольку, когда он применяется, он не может найти элемент, который он пытается прослушать.

brainless coder · Answer 5 · 2014-05-02T15-35-00.000Z

Попробуй это -

$('#dynamic-id').on('click', 'a.dialog-page', function(event){        
    event.preventDefault;
    $this = $(this);

          var URL     = $(this).attr('href');
          var dialogbox = document.getElementById('dialog');
          var dialogOptions = {

                        width: 500,
                        height: 200,
                        modal: true,
                        close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

    if(dialogbox==null) {
        $this.after("<div id=\"dialog\"></div>");

    }

    jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);
});

Причина отсутствия работы -

$("a.dialog-page").click(function(event) {

а также

$('#dynamic-id').on('click', 'a.dialog-page', function(event){

в основном одинаковы. поэтому, когда вы выполняете вторую строку, вы переопределяете предыдущее событие onclick. Вы можете использовать любой из них, и вы должны быть в порядке. Вот скрипка. Http://jsfiddle.net/KytV8/