Код JQuery не выполняется, когда столбцы начальной загрузки выбраны для отображения изменений.

Question

У меня есть стартовая таблица, у которой в начале нет видимого столбца: data-visible = "false". Столбцы заголовок содержит кнопку, чтобы отобразить модальный диалог справки:

<script> 

    // This is repeated for each column that have help button, 
    // some are visible at the start and some not. 
    $("#helpButtonColumnX").click(function(event) { 
     event.stopPropagation(); // Prevent ordering by the field 
           // when the button is pressed. 
     console.log("Hey"); // Do something 
     $('#modalDialogColumnX').modal('show'); 
    }); 
</script> 

Проблема заключается в том, что, когда пользователь изменяет какие столбцы хотят видеть эту функциональные потери. (Консоль.log предназначена для отладки и подтверждается, что функция не вызывается). Каждый столбец имеет свою собственную кнопку и модальный, я помещаю X в качестве примера. Заранее спасибо.

Вот codeply

Answer 1

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

See this answer

Answer 2

Возможно не самый лучший код, но уверен, что лучший (и работал) исправление.

Поместите событие OnClick в функции для примера helpPrice_click()

function helpPrice_click() { 
    //$("document").on("click", "#help s", function() { 
     event.stopPropagation(); 
     console.log("Hey"); 
     $('#modalPrice').modal('show'); 
    } 

И называть его непосредственно на OnClick вашей кнопки

<button class="btn btn-xs" data-toggle="modal" data-target="#modalPrice" id="helpPrice" onclick="helpPrice_click()">