OnClick Флажка + Аякс кэш HTML

Question

У меня возникли проблемы со следующей (старой системой я обновляю):

• У меня есть список флажка в <div id='list'>.
• Когда установлен флажок JS, вызывается запрос ajax, который возвращает JS для выполнения.
• Этот JS в запросе Ajax получает '#list', чтобы кэшировать html, чтобы мы могли повторно отображать в нескольких других местах.

Проблема: HTML-кэшируются всегда быть до значения CheckBox вместо после

HTML-код:

<div id="list"> 
    <input id="checkboxRessource_413" type="checkbox" onclick="throwXMLHttpRequest('modif.php','', '4', '413','', 'contributeurUpdate');">name 1 
    <br> 
    <input id="checkboxRessource_414" type="checkbox" onclick="throwXMLHttpRequest('modif.php','', '4', '414','', 'contributeurUpdate');">name 2 
</div> 

Аякса файл возвращает следующий JavaScript:

var htmlList = $("#list").html(); 

Проблема htmlList содержит html Перед проверкой флажка, как я могу ge вокруг?

Answer 1

В зависимости от того, какую версию jQuery вы используете, событие onclick будет запускаться и обрабатываться до того, как значение флажка действительно изменится. Я бы предложил использовать событие onchange вместо onclick, так как это гарантирует, что событие не будет работать до тех пор, пока флажок не будет установлен или не установлен.

Кроме того, $.html() не вернет статус флажка. Фактический html в DOM не изменяется, если вы установите флажок; статус checked хранится как property на входе, а не attributed. Вам нужно вручную проверить статус checked каждого флажка и отправить эту информацию на вашу .php-страницу. См. Пример Fiddle здесь.

var checkedStatus = []; // send this array to your php 
$(':input', '#list').each(function() { 
    checkedStatus.push($(this).prop('checked')); 
});