个人中心
gpt4 book ai didi

javascript - 如果按钮子级位于模式下的父类中，如何委托(delegate)事件

转载 作者：行者123 更新时间：2023-12-03 05:16:21 27 4
gpt4 key购买 nike

我正在处理的问题是在单击的情况下委托(delegate)事件。 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 时，会添加另一个带有选项 # 和选项文本的选项字段，或者删除相同的选项字段。如果没有委托(delegate)，这不会发生，但是使用这样的委托(delegate)，它甚至不起作用。

最佳答案

问题与均匀委托(delegate)无关，而是与事件和动态元素的错误使用有关。

你应该使用

$("#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"> )。

关于javascript - 如果按钮子级位于模式下的父类中，如何委托(delegate)事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41596457/

27 4 0
文章推荐： javascript - 是否可以在 Backbone.js 中使用 History.loadUrl 重新加载路由并传入用作成功消息的字符串？
文章推荐： javascript - 如何在 react 中将组件滚动到底部
文章推荐： javascript - 从 js 函数调用引导模式
文章推荐： javascript - 自定义 Flatpickr Knockout 装订
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com