jQuery auf Klick Funktion funktioniert nicht für verschachtelte Elemente

Ich versuche, die Attribute des übergeordneten Elementes des geklickten Elements und die Elemente, auf denen click-Ereignis ausgelöst werden sollte dynamisch über jQuery hinzugefügt werden. Dies ist mein Code für Click-Ereignis, das überhaupt nicht jedochjQuery auf Klick Funktion funktioniert nicht für verschachtelte Elemente

$("body").on('click', ".colors_storage input", function (event) { 
    console.log($(event.target).parents().find('div.colors_storage_outer > select').attr('data-id')) 
    /*console.log(parent.attr('data-id')) 
    console.log(parent.attr('name'))*/ 
})

arbeiten, ist dieser Code funktioniert, sondern gibt nur eine ID 855 unabhängig davon, welche Eingabe Elem geklickt wird.

$("body").on('click', $(".colors_storage input"), function (event) { 
    console.log($(event.target).parents().find('div.colors_storage_outer > select').attr('data-id')) 
    /*console.log(parent.attr('data-id')) 
    console.log(parent.attr('name'))*/ 
})

und das ist meine HTML-Struktur.

<div class="colors_storage_outer"> 
    <select data-id="855" name="colors[]" multiple="" class="form-control colors_storage bulk-colors select2-hidden-accessible" data-placeholder="Colors" tabindex="-1" aria-hidden="true"></select> 
    <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" style="width: 121.25px;"> 
     <span class="selection"> 
      <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"> 
       <ul class="select2-selection__rendered"> 
        <li class="select2-search select2-search--inline"> 
         <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Colors" style="width: 119.917px;"> 
        </li> 
       </ul> 
      </span> 
     </span> 
     <span class="dropdown-wrapper" aria-hidden="true"></span> 
    </span> 
</div> 
<div class="colors_storage_outer"> 
    <select data-id="853" name="colors[]" multiple="" class="form-control colors_storage bulk-colors select2-hidden-accessible" data-placeholder="Colors" tabindex="-1" aria-hidden="true"></select> 
    <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" style="width: 121.25px;"> 
     <span class="selection"> 
      <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"> 
       <ul class="select2-selection__rendered"> 
        <li class="select2-search select2-search--inline"> 
         <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Colors" style="width: 119.917px;"> 
        </li> 
       </ul> 
      </span> 
     </span> 
     <span class="dropdown-wrapper" aria-hidden="true"></span> 
    </span> 
</div>

Quelle

2017-04-11 Adam nick

Sie haben keine '.colors_storage input' in diesem Code. –

@MichaelCoker: Der Code hat '.colors_storage input'. Berücksichtigen Sie den Abstand zwischen den Wörtern. es sucht nach dem 'input'-Element innerhalb des Elements mit' ..colors_storage'-Klasse – Sanchit

@Sanchit wo? Das einzige '.colors_storage'-Element auf der Seite ist ein 'select' und ein' input' kann kein Kind eines 'select' sein. –

Der Selektor auf Ihrem Click-Handler stimmt mit nichts auf der Seite überein. Wenn Sie es einfach in input ändern, wird der Click-Handler ausgelöst, aber die falsche ID wird zurückgegeben. Scheint zu funktionieren, wenn Sie Ihren Code ändern $.closest() und $.find() statt $.parent()

$("body").on('click', "input", function (event) { 
 
    console.log($(this).closest('div.colors_storage_outer').find('> select').attr('data-id')) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="colors_storage_outer"> 
 
    <select data-id="855" name="colors[]" multiple="" class="form-control colors_storage bulk-colors select2-hidden-accessible" data-placeholder="Colors" tabindex="-1" aria-hidden="true"></select> 
 
    <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" style="width: 121.25px;"> 
 
     <span class="selection"> 
 
      <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"> 
 
       <ul class="select2-selection__rendered"> 
 
        <li class="select2-search select2-search--inline"> 
 
         <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Colors" style="width: 119.917px;"> 
 
        </li> 
 
       </ul> 
 
      </span> 
 
     </span> 
 
     <span class="dropdown-wrapper" aria-hidden="true"></span> 
 
    </span> 
 
</div> 
 
<div class="colors_storage_outer"> 
 
    <select data-id="853" name="colors[]" multiple="" class="form-control colors_storage bulk-colors select2-hidden-accessible" data-placeholder="Colors" tabindex="-1" aria-hidden="true"></select> 
 
    <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" style="width: 121.25px;"> 
 
     <span class="selection"> 
 
      <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"> 
 
       <ul class="select2-selection__rendered"> 
 
        <li class="select2-search select2-search--inline"> 
 
         <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Colors" style="width: 119.917px;"> 
 
        </li> 
 
       </ul> 
 
      </span> 
 
     </span> 
 
     <span class="dropdown-wrapper" aria-hidden="true"></span> 
 
    </span> 
 
</div>

Quelle

2017-04-11 20:34:47

kannst du bitte darauf hinweisen, warum mein Selektor falsche IDs gab? –

@Adamnick du rufst '$ .parents()' an, das alle Eltern auswählt, Verwenden Sie dann '$ .find()', um die Auswahl zu finden - das gibt alle Auswahlmöglichkeiten zurück. Es würde funktionieren, wenn Sie Ihre Zeile zu diesem geändert haben, so dass es nur das '.colors_storage_outer'-Elternteil der' Eingabe' findet, auf die Sie 'console.log ($ (event.target) .parents ('div.colors_storage_outer') geklickt haben). find ('> select') .attr ('daten-id')); ' –

@Adamnick aber' $ .closes() 'ist wahrscheinlich das, was Sie stattdessen verwenden möchten, es werden nicht mehrere Elemente zurückgegeben. –

Es gibt einige Selektoren zu verwenden, die falsch sind, wie andere darauf hingewiesen hat.

Auch würde ich closest('.colors_storage_outer') mit einem Selektor verwenden, so dass es den Baum hinauf geht und am Selektor stoppt. Sie können dies auch mit den Eltern tun (parents('.colors_storage_outer')). Dann suchen Sie nach der Auswahl von dort.

Versuch:

$("body").on('click', "input.select2-search__field", function (event) { 
    console.log($(this).closest('.colors_storage_outer').find('> select').attr('data-id')) 
})

Quelle

2017-04-11 20:35:53 HoofHarted

danke, arbeitete wie ein Charme. Kannst du bitte darauf hinweisen, warum mein Selektor falsche IDs gegeben hat? –

@Adamnick '$ (event.target) .parents(). Find ('. Colors_storage_outer> select')' gibt 2 Elemente für Ihr Beispiel zurück. Wenn Sie dann '.attr ('Daten-ID') aufrufen, gibt es den Attributwert für das erste Element zurück. – HoofHarted

jQuery auf Klick Funktion funktioniert nicht für verschachtelte Elemente

Antwort

Verwandte Themen