Модальный диалог иногда не вызван с помощью ajax в mvc

Question

Я показываю модальное диалоговое окно с использованием ajax и используя пейджинг. Я обнаружил, что когда загружается исходная страница, появляется модальный диалог, который является частичным представлением с Ajax, но если я нажимаю на следующую страницу и добавляю новые элементы DOM, то иногда, когда я нажимаю ссылку «Действие», только простой частичный вид загруженный без AJAX, он не загружается в модальном диалоговом окне, когда я его отлаживаю, предположим, что идентификатор записи, который я хочу просмотреть, - это 11, затем через ajax это 11? == 138445555, но когда нормальный частичный вид называется просто ViewDetail? = 3. Я использую следующий код jquery для вызова модального диалога. Пожалуйста, укажите, где это проблема. Спасибо ....

$(function() { 
    $.ajaxSetup({ 
     cache: false 
    }); 
    $('.btnShowDialog').click(function() { 
     $('.ShowModalDialog').load(this.href,function() { 
      $('#ShowModal').modal({ 
       backdrop: 'static', 
       Keyboard: true 
      }, 'show'); 
     }), 
     return false; 
     e.preventDefault(); 
    });); 

Answer 1

user2802591,

Если вы изменяете некоторые из элементов DOM, вы можете быть изменение кнопки в некотором роде. Я не знаю точно, потому что я не вижу весь код.

В любом случае, если это так, метод jQuery click не может выполняться на динамических элементах DOM. Вместо этого используйте этот блок:

$(document).on('click', '.btnShowDialog', function() { 
    // code here 
}); 

Это будет выполнять функцию динамического элемента DOM. Конечно, это было бы решением, если вы обновляете эту кнопку, или она каким-то образом изменяется при динамическом добавлении элементов.

Answer 2

1. у пропускал «}»
2. предотвратить дефолт должен быть в начале
3. с новым DOM вам нужно сбросить щелчок, или использовать «на» (жить, если у вас старая JQ: http://api.jquery.com/on/)

$(function() { 
    $.ajaxSetup({ 
     cache: false 
    }); 
    $('.btnShowDialog').on('click',function (e) { 
     e.preventDefault(); 

     $('.ShowModalDialog').load(this.href,function() { 
      $('#ShowModal').modal({ 
       backdrop: 'static', 
       Keyboard: true 
      }, 'show'); 
     }), 
     return false; 

    }); 
});