События семантического пользовательского интерфейса, которые не запускаются после вызова AJAX

Я использую семантический интерфейс 2.1, и у меня есть проблема. У меня есть три ползунка на моей странице. Все они имеют один и тот же класс, и я могу их инициализировать сразу. Каждый из них содержит атрибут data-*, который мне нужно отправить на сервер с помощью вызовов AJAX.События семантического пользовательского интерфейса, которые не запускаются после вызова AJAX

Вот проблема:

После первого вызов AJAX закончен, события для флажка больше не работают. Я знаю, что события связаны с DOM, и с изменением DOM они не будут обновляться, но есть ли какие-либо пути вокруг него?

Вот очень простая версия моей страницы:

<html> 
<body id="body"> 
<!-- First Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="0" type="checkbox"> <label></label> 
</div> 
<!-- Second Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="2" type="checkbox"> <label></label> 
</div> 
<!-- Third Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="3" type="checkbox"> <label></label> 
</div> 

<button class="button-action">Do Stuff</button> 

</body> 
<script> 
$('.checkbox.comment').checkbox().checkbox({ 
    onChecked: function() { 
     // This is only called before ajax reload, after ajax, it just won't 
     console.log("onChecked called"); 
    }, 
    onUnchecked: function() { 
     // This too is only called before ajax reload 
     console.log("onUnchecked called"); 
    } 
}); 

$(document).delegate('.button-action', 'click', function() { 

    $.ajax({ 
     // Noraml ajax parameters 
    }) 
    .done(function (data) { 
     if (data.success) { 
      // Reload 
      $('#body').load(document.URL + ' #body'); 
     } 
    }); 
}); 
</script> 
<html>

источник

2016-07-30 VSG24

Вы можете попробовать поставить флажок слушателя событий внутри функции и вызова этой функции каждый раз перезагрузить страницу или при внесении изменений в документе DOM. Я привел пример кода ниже для справки.

function Checkbox_eventlistener(){ 
 
    $('.checkbox.comment').checkbox().checkbox({ 
 
     onChecked: function() { 
 
      // This is only called before ajax reload, after ajax, it just won't 
 
      console.log("onChecked called"); 
 
     }, 
 
     onUnchecked: function() { 
 
      // This too is only called before ajax reload 
 
      console.log("onUnchecked called"); 
 
     } 
 
    }); 
 
} 
 

 
$(document).delegate('.button-action', 'click', function() { 
 

 
    $.ajax({ 
 
     // Noraml ajax parameters 
 
    }) 
 
    .done(function (data) { 
 
     if (data.success) { 
 
      // Reload 
 
      $('#body').load(document.URL + ' #body'); 
 
      Checkbox_eventlistener(); 
 
     } 
 
    }); 
 
}); 
 

 
$(function(){ 
 
    Checkbox_eventlistener(); 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<!-- First Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="0" type="checkbox"> <label></label> 
 
</div> 
 
<!-- Second Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="2" type="checkbox"> <label></label> 
 
</div> 
 
<!-- Third Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="3" type="checkbox"> <label></label> 
 
</div> 
 

 
<button class="button-action">Do Stuff</button>

источник

2016-08-01 02:07:12

Я боюсь, что это не работает. В первый раз это нормально, но после перезагрузки страницы кнопки ничего не делают. – VSG24

Вам нужно ввести выражение суффикса селектора в свой метод **. Load() **? В соответствии с документацией JQuery: _ «При вызове .load() с использованием URL без суффикса селекторного выражения содержимое передается в .html() перед удалением скриптов. Выполняет блоки скриптов перед их отбрасыванием. .load() вызывается с выражением селектора, добавленным к URL-адресу, однако сценарии удаляются до обновления DOM и, таким образом, не выполняются. "_ http://api.jquery.com/load/ –

Без этой части '+ '# body'' это создает беспорядок, он дублирует« тело ». Я могу подтвердить, что без этого селектора до конца URL-адреса он работает, но также дублирует #body. элемент – VSG24

События семантического пользовательского интерфейса, которые не запускаются после вызова AJAX

ответ

Смежные вопросы