'如果单击按钮'在已分配给某个功能的按钮上

'If button is clicked' on a button already assigned to a function

本文关键字：按钮 功能 如果 单击 分配      更新时间：2023-09-26

我有这段代码，包括按钮，每个按钮在单击时都会调用一个ajax函数，以及一个弹出窗口，其中填充了ajax函数的内容。

<script>
function loadindex1() {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //select the div to change by id
            document.getElementById("tt_popup").innerHTML = xmlhttp.responseText;
        }
    }
    //select the file to show next
    xmlhttp.open("GET", "stop_1.php", true);
    xmlhttp.send();
}
function loadindex2() {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //select the div to change by id
            document.getElementById("tt_popup").innerHTML = xmlhttp.responseText;
        }
    }
    //select the file to show next
    xmlhttp.open("GET", "stop_2.php", true);
    xmlhttp.send();
}
</script>
</head>
<body>
    <div data-role="popup" id="tt_popup" >
      <p>Have patience...</p>
    </div> <!-- /popup -->
    <div id="tt_div1"></div>
    <a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn  ui-corner-all" onclick="loadindex1()" id="button_stop1" data-transition="flip" >
       <img src="/Pictures/Location_original.png" alt="Problems?" id="loc_img" />
    </a>
    <a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn  ui-corner-all" onclick="loadindex2()" id="button_stop2" data-transition="flip" >
       <img src="/Pictures/Location_original.png" alt="Problems?" id="loc_img" />
    </a>

我现在还想知道点击了哪个按钮，这样我就可以用它做点什么了。我想使用本地存储，并制作一个面板，用户可以在其中查看有关上次单击按钮的位置的信息。但我首先需要知道点击了哪个按钮。（我省略了一些代码，因为完整的代码相当长）

我试着把这个放在头上的脚本标签中：

document.getElementById('button_stop1').onclick = function() {
   alert("button was clicked");
}

但这并没有起到任何作用。按钮的作用和以前一样。

我也试过：

(function () {
    // Enables stricter rules for JavaScript
    "use strict";
    // Reference two buttons, and a textbox
    var playButton = document.getElementById("play"),
        stateTextBox = document.getElementById("state"),
        ignoreButton = document.getElementById("ignore");
    // Function that changes the value of our stateTextBox
    function changeState(event) {
        stateTextBox.value = event.target.id + " was clicked";
    }
    // Event handlers for when we click on a button
    playButton.addEventListener("click", changeState, false);
    ignoreButton.addEventListener("click", changeState, false);
}());

但这也无济于事。至少我的第一次尝试是在使用按钮时没有在按钮上放任何东西。所以我觉得这与此有关。

我想我不能在一个按钮中调用两个函数，但我没有东西可以尝试了。

如果每个按钮调用不同的函数，为什么需要确定单击了哪个按钮？

如果你真的必须这样做，我想你可以创建一些东西，比如（在JQuery中）：

 $(document).on("pageinit",function()
    {
      $(".ui-btn").on("click", function()
      {
        var button_value = $(this).val();
        var button_id = $(this).attr("id");
       alert("You''ve just clicked on the "+button_value+" button, with ID: "+button_id+"!");
       });
     });

感谢Omar:

HTML:

<div data-role="popup" id="tt_popup">
    <p>Have patience...</p>
</div>
<a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn  ui-corner-all" id="button_stop1" data-transition="flip">button_stop1</a>
 <a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn  ui-corner-all" id="button_stop2" data-transition="flip">button_stop2</a>

Javascript：

$(document).on("pagecreate", function () {
    $("#button_stop1, #button_stop2").on("click", function () {
        $("#tt_popup p").text("Button with ID " + this.id + " was clicked");
    });
});

正如这把小提琴解决了问题。

相关文章：