Question

我想弄清楚为什么我的javascript在点击按钮时没有运行。我已经检查过以确保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

可能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 2

将您的函数放在输入按钮标记上方的脚本标记中。在您的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文件中。请在头标记或按钮上方包含js文件。

如果有效，请告诉我。

Answer 3

感谢大家的投入。

我能够获得触发javascript函数的按钮，但我不知道它为什么会起作用。

我创建了一个新功能并将其连接到按钮。

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

单击按钮时会触发此测试功能。然后我尝试将其余代码添加到test2函数中。那也被解雇了。看到这个工作，我改变了原来的函数名称

btn_SaveCriteria_onclick()

到

test()

并删除了test2函数。出于某种原因，将名称更改为test（）有效，并且javascript被触发。因此，解决方案是将函数名称从btn_SaveCriteria_onclick（）更改为其他内容，我将其更改为saveSubscriptionOnClick（）。

我不知道为什么会这样，或者为什么这是一个问题，但不好意思。

Javascript按钮onclick（）没有触发

3 个答案: