2017-11-25 118 views
0

我有一个这样的指标:使用jQuery函数我在前面加上这个代码块div容器内jQuery的事件代表团并不对点击工作在一个div

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

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

我想有一个点击监听到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作为静态元素。我能做什么?任何建议?谢谢

+1

你是如何确定点击不工作的?你在那里添加了一个“调试器”吗?相反,你的逻辑不工作? –

回答

1

你的代码的问题是你的选择器。

您有:

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

它应该是:

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

当您想通过两个或更多的类来选择元素,您必须将类选择写都在一起,没有它们之间有空白,用这种方法'.class1.class2.class3'

+0

关于级联的Subtile修正...点代表班级。两个选择器之间的空间意味着之前的一个孩子。昏迷可以用作不同元素列表的分隔符。 ;)请修改,因为你已经确定了这个问题。 –

+1

没有点或'#'目标标签名称。 ---所以在OP代码中,脚本的目标是一个'button-delete>'(显然是不存在的),具有'button'类的元素的子元素。 –

+0

我不认为我的回答是错误的。这是参考多个类选择器。当然,你也可以组合选择器,但这只是为了展示如何选择一个包含多个类的元素。 – Mindastic