jQuery Checkbox 事件被累积添加答案

【问题标题】：jQuery Checkbox event being added cumulativelyjQuery Checkbox 事件被累积添加
【发布时间】：2017-10-09 10:15:09
【问题描述】：

这个逻辑的目标是：-

要在单击复选框时打开引导模式
在模式中有两个按钮来确认或取消该选项。
只影响被点击的复选框

问题在于，当多个复选框被点击时，它们都共享相同的事件，并且您点击的次数越多，受影响的越多。我尝试了各种解决方案来尝试让点击事件只影响那个特定的复选框，尽管我没有运气得到最后一点。

如果有任何帮助，我将不胜感激！

//listen for a click on the checkbox
var confirm = $('#validationConfirm');
var cancel = $('#validationCancel');

function modalCheck(e, element) {
  console.log(e.srcElement.checked)
  if (amIclicked(e, element)) {
    confirm.click(function() {

      console.log(e.srcElement)
      element.checked = true
    });
  }
  if (amIclicked(e, element)) {
    cancel.click(function() {

      console.log(e.srcElement)
      element.checked = false
    });
  }
}

function amIclicked(e, element) {
  e = e || event;
  var target = e.target || e.srcElement;
  if (target.id == element.id)
    return true;
  else
    return false;
}

#validationModal {
  top: 20%;
}

.validationModal-body {
  text-align: center;
  padding: 5%;
}

.validationModal-body h2 {
  font-weight: 600;
}

.validationModal-body .row {
  padding: 2%;
}

.Staf-login__table .row :nth-child(4) {
  text-align: initial;
}

.Staf-login__table .row {
  padding: 1% 0;
}

@media (max-width: 770px) {
  .voucher-code-checker--go {
    width: 100%;
    padding: 1em;
    text-align: center;
  }
  .btn-purple.go {
    width: 100%;
  }
}

.Staff-login__view-more ul {
  list-style-type: none;
  display: flex;
  flex-flow: row;
}

.Staff-login__view-more li {
  border: 1px solid #D4D4D4;
  border-radius: 50px;
  padding: 0px 10px;
  font-size: 0.8em;
  margin: 0 2.5px;
}

.Staff-login__view-more a {
  color: #4A4A4A;
}

.Staff-login__view-more li:hover {
  background: #2D988D;
  color: #fff;
  opacity: 0.5;
}

.Staff-login__view-more li.active {
  background: #2D988D;
  color: #fff;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../Sass/scripts/jquery-3.2.1.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <title>Voucher Code Checker</title>
</head>

<div class="Staff-login__wrapper">
  <div class="Staff-login__header">
    <div class="row flex">
      <div class="col-xs-10 col-sm-4 col-md-4 Spaced_x-small" id="StaffLogin">
        <h3>Voucher Code Checker</h3>
      </div>
      <div class="col-sm-0 Spaced_x-small"><a href="#">LOGOUT</a></div>
    </div>
    <div class="row">
      <div class="col-sm-8 no-padding">
        <div id="staffLoginIndexSearch" class="col-sm-7">
          <div class="input-group stylish-input-group">
            <input type="text" class="form-control" placeholder="Search...">
            <span class="input-group-addon">
                            <button type="submit">
                                <span class="glyphicon glyphicon-search"></span>
            </button>
            </span>
          </div>
        </div>
        <div class="voucher-code-checker--go col-sm-2"><button class="btn-purple go">Go</button></div>
      </div>

      <div class="col-sm-4 Staff-login__create_back--btn">
        <button class="btn-purple">BACK</button>
      </div>

    </div>
  </div>

  <!--Staff Login Table-->
  <div class="Staf-login__table Spaced_x-small">
    <div class="row primary-bg">
      <div class="col-xs-2 col-sm-2">Name</div>
      <div class="col-xs-2 col-sm-2">Email</div>
      <div class="col-xs-2 col-sm-2">Code</div>
      <div class="col-xs-2 col-sm-4">Validate</div>
      <div class="col-xs-2 col-sm-2">More Details</div>
    </div>

    <div class="row">
      <div class="col-xs-3 col-sm-2">John</div>
      <div class="col-xs-3 col-sm-2">Smith</div>
      <div class="col-xs-3 col-sm-2">eGUWKfed</div>
      <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div>
      <div class="col-xs-3 col-sm-2">
        <a href="#"><img src="../Images/green_info_icon.png" /></a>
      </div>
    </div>

    <div class="row primary-light-bg">
      <div class="col-xs-3 col-sm-2">John</div>
      <div class="col-xs-3 col-sm-2">Smith</div>
      <div class="col-xs-3 col-sm-2">eGUWKfed</div>
      <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div>
      <div class="col-xs-3 col-sm-2">
        <a href="#"><img src="../Images/green_info_icon.png" /></a>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-3 col-sm-2">John</div>
      <div class="col-xs-3 col-sm-2">Smith</div>
      <div class="col-xs-3 col-sm-2">eGUWKfed</div>
      <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div>
      <div class="col-xs-3 col-sm-2">
        <a href="#"><img src="../Images/green_info_icon.png" /></a>
      </div>
    </div>

    <div class="row primary-light-bg">
      <div class="col-xs-3 col-sm-2">John</div>
      <div class="col-xs-3 col-sm-2">Smith</div>
      <div class="col-xs-3 col-sm-2">eGUWKfed</div>
      <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div>
      <div class="col-xs-3 col-sm-2">
        <a href="#"><img src="../Images/green_info_icon.png" /></a>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-3 col-sm-2">John</div>
      <div class="col-xs-3 col-sm-2">Smith</div>
      <div class="col-xs-3 col-sm-2">eGUWKfed</div>
      <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div>
      <div class="col-xs-3 col-sm-2">
        <a href="#"><img src="../Images/green_info_icon.png" /></a>
      </div>
    </div>

    <div class="row primary-light-bg">
      <div class="col-xs-3 col-sm-2">John</div>
      <div class="col-xs-3 col-sm-2">Smith</div>
      <div class="col-xs-3 col-sm-2">eGUWKfed</div>
      <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div>
      <div class="col-xs-3 col-sm-2">
        <a href="#"><img src="../Images/green_info_icon.png" /></a>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-3 col-sm-2">John</div>
      <div class="col-xs-3 col-sm-2">Smith</div>
      <div class="col-xs-3 col-sm-2">eGUWKfed</div>
      <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" id="test" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div>
      <div class="col-xs-3 col-sm-2">
        <a href="#"><img src="../Images/green_info_icon.png" /></a>
      </div>
    </div>

    <div class="row primary-light-bg">
      <div class="col-xs-3 col-sm-2">John</div>
      <div class="col-xs-3 col-sm-2">Smith</div>
      <div class="col-xs-3 col-sm-2">eGUWKfed</div>
      <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" id="test2" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div>
      <div class="col-xs-3 col-sm-2">
        <a href="#"><img src="../Images/green_info_icon.png" /></a>
      </div>
    </div>

    <!--View More-->
    <div class="Staff-login__view-more">
      <ul>
        <a href="#">
          <li>
            <p>
              <</p>
          </li>
        </a>
        <a href="#">
          <li class="active">
            <p>1</p>
          </li>
        </a>
        <a href="#">
          <li>
            <p>2</p>
          </li>
        </a>
        <a href="#">
          <li>
            <p>3</p>
          </li>
        </a>
        <a href="#">
          <li>
            <p>></p>
          </li>
        </a>
      </ul>
    </div>
  </div>

  <!-- Validation Modal -->
  <div id="validationModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="validationModal-body">
          <h2>Are you sure you want to validate this code?</h2>
          <div class="row">
            <div class="col-sm-6" style="text-align: right;"><button class="btn-purple" id="validationConfirm">confirm</button></div>
            <div class="col-sm-6" style="text-align: left;"><button class="btn-purple" id="validationCancel">cancel</button></div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【问题讨论】：

标签： jquery events checkbox event-handling

【解决方案1】：

所以我用 .unbind 'Event Handler Type' 解决了这个问题。

  confirm.unbind("click");
  cancel.unbind("click");

http://api.jquery.com/unbind/

删除了之前堆积的事件。但是，如果您不强制关闭模式并重新设置事件以重新开始，这是行不通的。

所以总的来说它最终看起来像这样：

 //listen for a click on the checkbox
    var confirm = $('#validationConfirm');
    var cancel = $('#validationCancel');

    function modalCheck(e, element) {
        console.log(e.srcElement.checked)
        //confirm button
        if (amIclicked(e, element)) {
            var confirmClick = confirm.click(function () {

                element.checked = true
                    confirm.unbind("click");
                    cancel.unbind("click");

                //closes modal
                    $(function () {
                        $('#validationModal').modal('toggle');
                    });
            });
        }
        //cancel button
        if (amIclicked(e, element)) {
            var cancelClick = cancel.click(function () {
                element.checked = false

                confirm.unbind("click");
                cancel.unbind("click");

                //closes modal
                $(function () {
                    $('#validationModal').modal('toggle');
                });
            });
        }
    }

    function amIclicked(e, element) {
        e = e || event;
        var target = e.target || e.srcElement;
        if (target.id == element.id)
            return true;
        else
            return false;
    }

【讨论】：