Question

我有这个代码，包括按钮，每个按钮在单击时调用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);
}());

但这也没有做任何事。至少我的第一次尝试工作时，我使用一个按钮没有我放在按钮中的所有那种东西。所以我认为它与此有关。

我想我不能在一个按钮中调用两个函数，但是我没有尝试过。

Answer 1

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

如果你真的必须，我猜你可以创造一些东西，比如这个（在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+"!");
       });
     });

Answer 2

要关闭此功能，感谢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");
    });
});

<{3>}中所见的

解决了这个问题。

＆＃39;如果点击按钮＆＃39;在已分配给功能的按钮上

2 个答案: