Отладка jQuery load() для ссылок в контенте, замененных на load()

В моем main.js у меня есть два правила, связанных со ссылками. Следует обрабатывать все ссылки, которые не начинаются с http://, mailto: или #. Он использует load() для замены содержимого в $('#contentMain'). Другой обрабатывает ссылки, начинающиеся с http://, и открывает их в новой вкладке.

$("a:not([href^='http://'],[href^='#'],[href^='mailto:'])").click( function(e) { 
    console.log('Caught click, loading via AJAX');
    var url = $(this).attr("href");
    var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
    e.preventDefault(); 
    if(url!=window.location){
       window.history.pushState({path:url},title,url);
       $('#contentMain').load(url);
        document.title = "It's New Orleans" + title;   
    }
});

$("a[href^='http://']").attr("target","_blank");

Проблема заключается в том, что такие ссылки, как /contact, не запускают первое правило, ЕСЛИ они находятся внутри $('#contentMain') после того, как функция load() заменила содержимое в первый раз, когда они нажал. Если вы нажмете /contact внутри #contentMain во время загрузки /content, то правило будет соблюдено, вы увидите console.log() и т.д.

Так почему же содержимое, замененное функцией load(), не подчиняется правилам в main.js? Эти правила в настоящее время находятся внутри $(document).ready(function(){, но я также попытался удалить его, чтобы посмотреть, поможет ли это.


javascript html jquery jquery-load
person jerrygarciuh    schedule 29.10.2013    source источник
comment
Не думайте о них как о правилах, думайте о них как о свойствах. Вы дали свойства исходным, однако новые не имеют этих свойств. вам придется либо использовать делегирование событий, либо повторно связывать эти события при добавлении новых элементов.   -  person Kevin B    schedule 29.10.2013
comment
Спасибо @KevinB! Погуглил и нашел jqueryfordesigners.com/simple-use-of-event-delegation   -  person jerrygarciuh    schedule 29.10.2013

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать обработчик .on(), например:

$("body" ).on( "click", "a:not([href^='http://'],[href^='#'],[href^='mailto:'])",function(e) { 
console.log('Caught click, loading via AJAX');
var url = $(this).attr("href");
var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
e.preventDefault(); 
if(url!=window.location){
   window.history.pushState({path:url},title,url);
   $('#contentMain').load(url);
    document.title = "It's New Orleans" + title;   
}});
person Nickolas    schedule 29.10.2013

arrow_upward
0
arrow_downward

Согласно комментарию @KevinB, ответ заменяется на

$("body").delegate("a:not([href^='http://'],[href^='#'],[href^='mailto:'])", "click", function(e) { 
    console.log('Caught click, loading via AJAX');
    var url = $(this).attr("href");
    var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
    e.preventDefault(); 
    if(url!=window.location){
       window.history.pushState({path:url},title,url);
       $('#contentMain').load(url);
        document.title = "It's New Orleans" + title;   
    }
});
person jerrygarciuh    schedule 29.10.2013
comment
.delegate() был заменен .on(), вы должны использовать его, начиная с jQuery 1.7. - person Mike Edwards; 29.10.2013