jQuery 事件委托不适用于点击 div

Question

我有这样的索引：

<body>
<div id="page-container">
  <div id="header">
    <div class="main">
      <div class="content">
        <div id="website-link"><a href=""></a></div>
        <div id="cart">
          <div class="price">120,00 €</div>
          <div class="cart-icon"><img src="img/cart.png" /></div>
          <div class="items">0</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="content">
        <div id="bradcrumbs">3D TOOL &gt; Upload &gt; <span class="active"> Customize</span></div>
        <div id="menu">
          <ul>
            <li><a href="">Help</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="main-content">
    <div class="block-container" id="block-container">
    <div id="tools">
      <form action="#" enctype="multipart/form-data" method="post" id="uploader">
        <input type="file" name="fileUpload" id="fileUpload"  style="display: none" multiple accept=".stl,.obj,.stp,.step">
        <label for="fileUpload">
          <div id="addmore" style="cursor: pointer"></div>
        </label>
      </form>
      <div id="checkout">Checkout</div>
    </div>
  </div>
  </div>
</body>
</html>

使用 jquery 函数，我将此代码添加到块容器中 div:

<div id='upload-container-<?php echo $i;?>'  class='upload-container'>
        <div class="form-data">
          <div class="col col1">
            <div class="col-content"><img src="img/square.jpg" /></div>
            <div class="col-info">Nome del file</div>
          </div>
          <div class="col col2">
        <div class="col-content">
          <label class="label">MATERIALI</label>
          <div class="select-style">
            <?php
              echo"<select name='materiali' class='materiali' autofocus tabindex='20' >";
                  foreach($oxmL->Materials->Material as $material)
                  {
                      echo "<option value=$material->MaterialID>$material->Name</option>";
                  }
              echo"</select>";
            ?>
        </div>
        <label class="label">FINITURA</label>
        <div id="selectmateriali2"class="select-style">
          <?php
            $id=$oxmL->Materials->Material['0']->MaterialID;
            echo"<select name='materiali2' class='materiali2' id='materiali2' autofocus tabindex='20'>";
            foreach($oxmL->Materials->Material as $material)
            {
                if($material->MaterialID==$id)
                {
                    foreach($material->Finishes->Finish as $finish)
                    {
                        echo "<option value=$finish->FinishID>$finish->Name</option>";
                    }
                }
            }
            echo"</select>";
          ?>
        </div>
        <label class="label">QUANTITA</label>
          <input name="quantity" id="quantity" type="number" class="quantita" min="1" step="1" value="1">
            </div>
            <div class="col-info"></div>
          </div>
          <div class="col col3">
            <div class="col-content">
              <div class="size-form">
                <div class="label">Resize</div>
                <input class="size" type="text" value="100"/>
              </div>
              <div class="size-text">Change the size of your object in percent</div>
              <div class="size-info">
                <div class ="box-title">
                <div class="title-icon"><img src="img/3dpr-form-xyz-cube.png" /></div>
              </div>
                <div class="axis-area">
                <div class="axis axis-x">X: <label for="x" class="labelx">2</label></div>
                <div class="axis axis-y">Y: <label for="y" class="labely">3</label></div>
                <div class="axis axis-z">Z: <label for="z" class="labelz">4</label></div>
              </div>
              </div>
            </div>
            <div class="col-info">
        <div class="icons">
            <div class="button button-duplicate"></div>
            <div class="button button-delete"></div>
        </div>
              <div class="price">450.20 €</div>
            </div>
          </div>
        </div>
        <div class="item-info">
          <div class="filename col col1"> <label for="filename">filename.ciops</label></div>
          <div class="icons col col2">
        <div class="button button-zoom"></div>
        <div class="button button-duplicate"></div>
        <div class="button button-delete"></div>
      </div>
          <div class="price col col3"> <label for="price" class="labelprice">450.20</label> €</div>
        </div>
    </div>

我想用 "button button-duplicate" class 为 div 创建一个点击监听器，我是这样做的：

$('#block-container').on('input','.quantita',quantityChanged);

    $('#block-container').on('input','.size',scaleChanged);

    $('#block-container').on('click','.button button-delete', function(){
        alert("ok");
        //some code
    });

    $('input[type=file]').on('change', prepareUpload);

    $('form').on('submit', uploadFiles);

但它不起作用，相反，页面中的所有其他侦听器都使用 #block-container 作为静态元素。我能做些什么？有什么建议吗？谢谢

Answer 1

您的代码有问题是您的select或。

你有：

$('#block-container').on('click','.button button-delete', function(){
        alert("ok");
        //some code
    });

应该是：

$('#block-container').on('click','.button.button-delete', function(){
        alert("ok");
        //some code
    });

当你想 select 两个或多个 class 元素时，你必须将 class select 全部写在一起，中间没有空格他们，就这样'.class1.class2.class3'

jQuery 事件委托不适用于点击 div

jQuery event-delegation doesn't work for click on a div

html

javascript

jquery

events

event-delegation