委派

委派

关注
发信
关注(28)粉丝(399)

javascript - 如果按钮子项位于模式下的父类中，则如何委派事件

我要处理的问题是在单击时委派事件。 html模态代码段为：

<div id="addQues" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Input Fields</h4>
      </div>
      <input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
      <div class="modal-body">
        <input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
        <select name="quesType" id="quesType" class="form-control" style="width: 100px">
            <option value="Single Choice" id="SC" name="SC">Single Choice</option>
            <option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
            <option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
            <option value="Image based" id="ÌMG" name="IMG">Image based</option>
            <option value="Video Based" id="VID" name="VID">Video Based</option>
            <option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
        </select>
        <div id="optList" name="optList">
            <div style="display:flex; vertical-align:top;" class="cooldiv">
                <input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
                <input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
                <button type="button" class="deleteMe">X</button>
                <button type="button" class="addNext">+</button>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
      </div>
    </div>

  </div>
</div>


jQuery代码是：

 $(".deleteMe").on("click",".cooldiv",function(){
   $(this).closest("div").remove();
   var optCount = parseInt($("#optCount").val());
   optCount = optCount-1;
   alert(optCount)
   $("#optCount").val(optCount);
});
$(".addNext").on("click",".cooldiv",function(){
    var optCount = parseInt($("#optCount").val());
    optCount = optCount+1;
    $("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
    $("#optCount").val(optCount);
    alert(optCount)
});


因此，基本上我想在单击+或x按钮时添加或删除选项（添加/删除类cooldiv）。但这不是这种情况。

更新：

完整的代码是这样的：

<?php   require "login/loginheader.php";
        $questionCounter = 1;
        $optCounter      = 1;
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/main.css" rel="stylesheet" media="screen">
  </head>
  <body>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="login/js/jquery-2.2.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="login/js/bootstrap.js"></script>
        <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addQues">Input Question No. <?php echo $questionCounter ?></button>

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

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Input Fields</h4>
          </div>
          <input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
          <div class="modal-body">
            <input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
            <select name="quesType" id="quesType" class="form-control" style="width: 100px">
                <option value="Single Choice" id="SC" name="SC">Single Choice</option>
                <option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
                <option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
                <option value="Image based" id="ÌMG" name="IMG">Image based</option>
                <option value="Video Based" id="VID" name="VID">Video Based</option>
                <option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
            </select>
            <div id="optList" name="optList">
                <div style="display:flex; vertical-align:top;" class="cooldiv">
                    <input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
                    <input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
                    <button type="button" class="deleteMe">X</button>
                    <button type="button" class="addNext">+</button>
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
          </div>
        </div>

      </div>
    </div>

    <div class="container">
      <div class="form-signin">
        <div class="alert alert-success">You have been <strong>successfully logged in</strong>.</div>
        <a href="login/logout.php" class="btn btn-default btn-lg btn-block">Logout</a>
      </div>
    </div> <!-- /container -->
  </body>
</html>

<script>
$(".deleteMe").on("click",'.cooldiv',function(){
   $(this).closest("div").remove();
   var optCount = parseInt($("#optCount").val());
   optCount = optCount-1;
   alert(optCount)
   $("#optCount").val(optCount);
});
$(".addNext").on("click",'.cooldiv',function(){
    var optCount = parseInt($("#optCount").val());
    optCount = optCount+1;
    $("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
    $("#optCount").val(optCount);
    alert(optCount)
});
</script>


当我单击输入问题编号1/2 ...时，将打开一个带有选项＃和选项文本的模式。我想要单击按钮+或x时，添加带有选项＃和选项文本的另一个选项字段，或者删除相同的内容。没有委派，它就不会发生，但是使用这样的委派，它甚至无法工作。

最佳答案

问题与授权无关，而与事件和动态元素的错误使用有关。

你应该用

$("#optList").on("click",'.deleteMe',function(){


和

$("#optList").on("click",'.addNext',function(){


因为#optList元素一直存在，所以动态添加的新元素是.deleteMe和.addNext。

这是应该可以按预期工作的jsfiddle：
https://jsfiddle.net/ev6kajjf/7/

（请注意，optCount的值仍然存在问题。我不确定为什么它的i以<input type="hidden" id="optCount" name="optCount" value="i">开头）。

07-24 09:39
Powered by LMLPHP ©2024 委派 0.033476