2017-11-25 129 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