I have an index like this:
<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 > Upload > <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>
using a jquery function i prepend this code inside block-container 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>
I want to had a click listener to the div with the "button button-duplicate" class, i made it like this:
$('#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);
but it doesn't works, instead every other listener in the page works using #block-container as static element. What can i do? Any suggestion? Thank you
The problem with your code is your selector.
You have:
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
And it should be:
$('#block-container').on('click','.button.button-delete', function(){
alert("ok");
//some code
});
When you want to select an element by two or more classes, you have to write the class selectors all together, without white spaces between them, in this way '.class1.class2.class3'