Question

所以我有一个我正在处理的网络应用程序，我有一个应用程序的一部分，它有一个部署按钮，它启动一个模态。在模态中，我还有两个按钮，一个用于确认，另一个用于取消。

当模态启动并单击其中一个按钮时，它会触发一次。但是，我的问题是，如果我退出模态，重新打开它并再次单击一个按钮，它将触发按钮两次。如果我重复这个过程，这种情况会持续下去，因此下一次点击会触发三次点击，依此类推。依此类推。

我尝试使用unbind和one在jQuery中无济于事，而且在这一点上有点难过。

以下是该部分的相关jQuery。如果有帮助的话，我也可以附上我使用的把手文件。

jQuery的：

 //open modal, present OK and Cancel buttons
$(".inventory").on('click', 'button.deploy', function () {
    console.log('DEPLOY')
    var machine = $(this).data("machine");
    var message = "Are you <b>SURE</b> you want to deploy the following machine:\n\n<b>" + $(this).data("machine") + "</b>";
    var newNetwork = $(this).parent().siblings(".select-option").find("option:selected").val();
    var currentDefault = $(this).parent().siblings(".select-option").attr('defaultValue');
    if (currentDefault !== newNetwork) {
        message += "\n\nChanging the network from: \n\n " + currentDefault + " -> <b>" + newNetwork + "</b>\n\n";
    }
    else {
        message += "\n\nRestarting  with the network:\n\n<b>" + currentDefault + "</b>\n\n";
    }
    message += "<i>NOTE: Any other network changes made to other machines will result in possible changes "
    message += "the next time there is a full deploy.</i>"

    $("#reset-message").html(message);
    $(".jquery-modal.blocker.current").show();
    $("div #reset-modal.modal").show();

    $("div #reset-modal").on('click', "#deploy-cancel", function () {
        $(".jquery-modal.blocker.current").hide();
        $("div #reset-modal.modal").hide();
        console.log('CANCEL')
    });

    $("div #reset-modal").on('click', "#deploy-confirm", function () {
        $(".jquery-modal.blocker.current").hide();
        $("div #reset-modal.modal").hide();
        console.log('CONFIRM')
    });

Answer 1

您似乎正在添加多个事件处理程序。

试试这个：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<h:head>
</h:head>

<h:body>

    <h:form id="accordionForm">
           <h3>Change Event</h3>
    <p:accordionPanel id="saurabhpanel" multiple="true">
        <p:ajax event="tabChange" listener="#{tabbedView.onTabChange}" update="@this" />

         <p:tab  id ="tab1" title="saurabh" binding="#{tabbedView.tab}">

        </p:tab>
        <p:tab id="tab2" title="sau" binding="#{tabbedView.tab2}">

        </p:tab>

    </p:accordionPanel>
    </h:form>
</h:body>
</html>

Answer 2

使用它可能有效

$('.inventory').unbind().bind('click','button.deploy',function(){

或

使用它应该工作

$(".inventory").on('click', 'button.deploy', function (event) {
    evt.stopPropagation();
    evt.preventDefault();

按钮在点击时多次递增和触发

2 个答案: