jQuery Checkbox事件被累积添加

时间:2017-10-09 10:15:10

标签: jquery events checkbox event-handling

这个逻辑的目标是: -

  1. 要在复选框上打开引导模式,请单击
  2. 在模式中有两个按钮,用于确认或取消该选项。
  3. 只有受影响的复选框
  4. 问题是,当单击多个复选框时,它们共享相同的事件,您单击的次数越多,受影响的越多。我已经尝试了各种解决方案来尝试让点击事件仅影响该特定复选框,尽管我没有幸运获得最后一点。

    我真的很感激任何帮助!

    
    
    //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>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:0)

所以我用.unbind'事件处理程序类型'解决了它。

  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;
    }