Javascript button onclick() not firing

Question

Я пытаюсь понять, почему мой javascript не работает при нажатии кнопки. Ive проверил, чтобы файл javascript загружался правильно, и в консоли нет ошибок. Когда я запускаю код javascript в консоли, код успешно запускается и выполняет то, что он должен делать, однако, когда я нажимаю кнопку, он не срабатывает. Я считаю, что весь мой синтаксис верен, поэтому я не уверен, что вызывает эту проблему.

Ниже HTML для кнопки:

<input class="btnSaveParameters" id="btn_SaveCriteria" onclick="return btn_SaveCriteria_onclick();" type="button" value="Save Subscription"/> 

Ниже функцию Javascript, который работает правильно в консоли, но не срабатывает при нажатии кнопки:

function btn_SaveCriteria_onclick() { 
    //Testing if function fires: 
    window.alert(5 + 6); 

    var availableSelects = []; 
    $("Select").each(function() { 
     availableSelects.push($(this).attr("id")); 
    }); 
    if (
     $("#" + availableSelects[1]) 
      .find(":selected") 
      .text() + $("#" + availableSelects[2]) 
      .find(":selected") 
      .text()+$("#" + availableSelects[2]) 
      .find(":selected").text() ==='AllAllAll' 
    ) { 
     $(".PageTitle").append("<div id='dialog' title='Parameter Warning'>You cannot select all for all 3 filters</div>"); 
      $("#dialog").dialog(); 
     } else { 
      var t = document.getElementById("modal-form").cloneNode(true); 
      t.style.display = "inline"; 
      var options = { 
       title : "Add a Description to your Subscription", 
       width : 500, 
       height : 100, 
       dialogReturnValueCallback : MyDialogClosed, 
       html: t 
      }; 
     }; 
     SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); 
    } 
} 

Может кто-нибудь увидеть почему javascript не стреляет с нажатием кнопки?

Answer 1

Спасибо всем за входные данные.

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

Я создал новую функцию и подключил ее к кнопке.

function test2() { window.alert(1+1);} 

Эта тестовая функция срабатывает при нажатии кнопки. Затем я попытался добавить остальную часть кода в функцию test2. Это также выстрелило. Видя, что это сработало, я изменил первоначальные функции от имени

btn_SaveCriteria_onclick() 

в

test() 

и удалил функцию test2. По какой-то причине сменилось имя на test(), и javascript уволен. Таким образом, решение меняло имя функции из btn_SaveCriteria_onclick() на другое, которое я изменил на saveSubscriptionOnClick().

Я понятия не имею, почему это сработало, или почему это было проблемой, но плохо это восприняло.

Answer 2

Возможно, событие onclick не находит функцию, потому что выходит за рамки.

Чтобы прикрепить событие с JQuery:

Я проверил и работает на:

https://jsfiddle.net/8k9ms39s/

// this will atach btn_SaveCriteria_onclick to btn_SaveCriteria button. 

    $(function() { 
     $('#btn_SaveCriteria').click(function(){ btn_SaveCriteria_onclick(); }); 
    }); 


    // this is your unchanged function 
    function btn_SaveCriteria_onclick() { 


    //Testing if function fires: 
    window.alert(5 + 6); 

    var availableSelects = []; 
    $("Select").each(function() { 
     availableSelects.push($(this).attr("id")); 
    }); 
    if ($("#" + availableSelects[1]).find(":selected").text() + $("#" + availableSelects[2]).find(":selected").text()+$("#" + availableSelects[2]).find(":selected").text() ==='AllAllAll') { 
     $(".PageTitle").append("<div id='dialog' title='Parameter Warning'>You cannot select all for all 3 filters</div>"); 
     $("#dialog").dialog(); 

    } else { 
    var t = document.getElementById("modal-form").cloneNode(true); 
    t.style.display = "inline"; 

    var options = { title: "Add a Description to your Subscription", width: 500, height: 100, dialogReturnValueCallback: MyDialogClosed, html: t };//$('<div id="pgDiv"><form id="pgForm" method="post"><input type="text" name="Description" id="pgDescription>Description: </form></div>').get(0) }; 


    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); 

    } 
    } 

Answer 3

Поместите функцию в тег сценария выше вашей кнопки ввода тега. В вашем HTML файле: https://jsfiddle.net/L7rmb4n1/

<script> 
function btn_SaveCriteria_onclick() { 
//Testing if function fires: 
alert(5 + 6); 
var availableSelects = []; 
$("Select").each(function() { 
    availableSelects.push($(this).attr("id")); 
}); 
if ($("#" + availableSelects[1]).find(":selected").text() + $("#" + availableSelects[2]).find(":selected").text()+$("#" + availableSelects[2]).find(":selected").text() ==='AllAllAll') { 
    $(".PageTitle").append("<div id='dialog' title='Parameter Warning'>You cannot select all for all 3 filters</div>"); 
    $("#dialog").dialog(); 

} else { 
var t = document.getElementById("modal-form").cloneNode(true); 
t.style.display = "inline"; 

var options = { title: "Add a Description to your Subscription", width: 500, height: 100, dialogReturnValueCallback: MyDialogClosed, html: t };//$('<div id="pgDiv"><form id="pgForm" method="post"><input type="text" name="Description" id="pgDescription>Description: </form></div>').get(0) }; 


SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); 

} 
} 

</script> 

<input class="btnSaveParameters" id="btn_SaveCriteria" 
onclick="btn_SaveCriteria_onclick();" type="button" value="Save Subscription"/> 

Если вы готовы поставить функцию в отдельный файл JS .Please включают JS файл в головной метке или выше кнопке.

Пожалуйста, дайте мне знать, если это сработает.