Erwartetes Verhalten: Wenn ich auf die Klasse .parent klicke, wird ein Elementdetail-Modal angezeigt, das Modal wird jedoch nicht angezeigt, wenn ich auf .dropdown oder eines der beiden klicke es ist Option.

<div class="parent click-for-item-detail">

  <div class="dropdown">                                         
    <a href="#" class="dropdown-toggle " data-toggle="dropdown">Options</a>                                         
    <ul class="dropdown-menu">                                         
      <li><a href="#">option-1</a></li>
      <li><a href="#">option-2</a></li>                                         
    </ul>                                      
  </div>

  <div class="item-image"><img class="click-for-item-detail" src="image.jpg></div>

  <div class="info">
    <a href="#" class="click-for-item-detail">Item title</a>
    <div class="click-for-item-detail"> item subtitle</div>
  </div>

</div>

Bisher:

$(".click-for-item-detail").on("click",function(e){

        // show the modal if the target itself has been clicked
        if(e.target === this) {
            $('#itemDetailModal').modal('toggle');
        }
    });

Ich habe jedem Element die Klasse click-for-item-detail hinzugefügt, die das Modal für Artikeldetails auslösen soll. Gibt es einen besseren Weg, um dies zu erreichen?

2
Bipul 16 Feb. 2020 im 08:52

3 Antworten

Beste Antwort

Es ist wahr, was Phong sagt und das funktioniert. Stellen Sie sich jedoch vor, Sie hätten jetzt viele untergeordnete Elemente in Ihrem Elternteil, die alle mit diesem Selektor übereinstimmen. Mit etwas wie dem Folgenden würden Sie jedem dieser Elemente einen Ereignis-Listener hinzufügen.

$(".info, .item-image").on("click", function(){
  console.log("Trigger");
});

Während Sie bei Ihrem ersten Ansatz bereits sehr nahe daran waren, nur einen Listener zu haben, egal wie viele untergeordnete Elemente sich im übergeordneten Element befinden.

Betrachten Sie folgendes Beispiel:

  <ul class='parent'>
    <li>No</li>
    <li>Click</li>
    <li>Event</li>
  </ul>

$(".parent").on("click",function(e) {
  if(!e.target.classList.contains('parent')) {
     return console.log('no event')
} 
  console.log('fire event')
});

Dies wird als Ereignisdelegation bezeichnet, und Sie tun dies bereits. Hier überprüfe ich, ob das Element, auf das ich klicke, tatsächlich von einem übergeordneten Element der Klasse ist. Erst dann feuere ich mein Ereignis ab.

Sie können natürlich alle Arten von Überprüfungen durchführen, zum Beispiel nur die <li> Elemente.

$(".parent").on("click", (e) => e.target.tagName == 'LI' && console.log('fire event'))

Schauen Sie sich dieses Beispiel an: https://codepen.io/bluebrown/pen/xxGVgYd?editors = 1111

Ich würde empfehlen, eine Websuche nach Ereignisdelegation und Ereignisblasen durchzuführen.

2
The Fool 16 Feb. 2020 im 07:24

Sie können den :not() Selektor zum Herausfiltern verwenden das Element, auf das Sie nicht klicken müssen:

$('.parent > :not(.dropdown)').click(function(e){
  alert('modal');
  //show modal
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">

  <div class="dropdown">                                         
    <a href="#" class="dropdown-toggle " data-toggle="dropdown">Options</a>                                         
    <ul class="dropdown-menu">                                         
      <li><a href="#">option-1</a></li>
      <li><a href="#">option-2</a></li>                                         
    </ul>                                      
  </div>

  <div class="item-image"><img src="image.jpg"></div>

  <div class="info">
    <a href="#">Item title</a>
    <div> item subtitle</div>
  </div>

</div>
1
Mamun 16 Feb. 2020 im 07:22

Sie können einige Selektoren angeben, die ausgelöst werden sollen.

Lesen Sie den folgenden Beitrag, um ein besseres Verständnis zu erhalten.

Ereignis-Listener für mehrere Elemente - jQuery

$(".info, .item-image").on("click", function(){
  console.log("Trigger");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent click-for-item-detail">

  <div class="dropdown">                                         
    <a href="#" class="dropdown-toggle " data-toggle="dropdown">Options</a>                                         
    <ul class="dropdown-menu">                                         
      <li><a href="#" class="dropdown-menu-item">option-1</a></li>
      <li><a href="#" class="dropdown-menu-item">option-2</a></li>                                         
    </ul>                                      
  </div>

  <div class="item-image"><img class="click-for-item-detail" src="image.jpg"></div>

  <div class="info">
    <a href="#" class="click-for-item-detail">Item title</a>
    <div class="click-for-item-detail"> item subtitle</div>
  </div>

</div>
2
Phong 16 Feb. 2020 im 07:05