0

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

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

Silver18020
  • 25
  • 6
  • 1
    How have you determined the click isn't working? Have you added a `debugger` in there? Is it instead that your logic isn't working? – Rory McCrossan Nov 25 '17 at 16:02

1 Answers1

1

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'

Mindastic
  • 4,023
  • 3
  • 19
  • 20
  • Subtile correction about the concatenation... The dot means class. A space between two selectors would mean a child of the previous. A coma can be used as a separator for a list of different elements. ;) Please edit, since you nailed the issue. – Louys Patrice Bessette Nov 25 '17 at 16:45
  • 1
    And no dot or `#` targets the tag name. --- So In OP code, the script targets a `` (obviously inexistant), child of an element which has class `button`. – Louys Patrice Bessette Nov 25 '17 at 16:53
  • I don't think my answer is wrong. This is making reference to multiple class selectors. Of course, you can combine selectors too, but this was just meant to show how to select an element containing multiple classes. – Mindastic Nov 25 '17 at 18:50
  • Your answer is correct. The explanations a *slightly* wrong. Check this sentence and re-read my comments: `they need to be concatenated by a dot, in this way...` --- The dot **is not** a concatenating character. It means class. There is no concatenating character. – Louys Patrice Bessette Nov 25 '17 at 20:21
  • I agree about this one though I do not agree about your first comment and that's why I answered in that way. The answer was updated. – Mindastic Nov 26 '17 at 20:32
  • What is wrong about the first comment? Yes, it could be `.class1, .class2 table th, .class3#someID, #anotherID.class4`... All those combinaisons would give different valid results. There is 4 characters to be aware of : [space] as "parental hirarchy", [#] as id, [.] as class and [,] as list separator. – Louys Patrice Bessette Nov 27 '17 at 00:42
  • I mean, there is nothing wrong. All what you explain there is correct. What I don't agree is that I should modify my answer because my answer is meant to answer the specific question and explain this specific case. There are tons of combinations that can be explained as well but it wasn't my intention to explain all of them. That's why I don't agree with you in your first comment. – Mindastic Nov 27 '17 at 00:48