JQuery Änderungsfunktion nicht mit Ajax Inhalt

meines HTML-Code arbeitetJQuery Änderungsfunktion nicht mit Ajax Inhalt

<div class="gridRowsContainer"> 
<div ng-repeat="item in ActiveUserData.ListModel track by $index" class=""> 
<!-- Checkboxes Generated/inserted here by ajax --> 
<div class="gridRow pnl-no-dimiss" ng-style="getRowCss(item)" id="user_list_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" style="background-color: transparent;"> 
    <div> 
     <div class="userLight listViewRow"> 
      <div class="ms-ChoiceField f-choice" data-hint="Users" data-value="SelectItem"> 
       <input id="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-input dataListField ng-valid ng-dirty ng-valid-parse ng-touched" type="checkbox" ng-model="item.isChecked" ng-change="UpdatedSelectedUsers(item)" tabindex="0" aria-checked="false" aria-invalid="false"> 
      </div> 
     </div> 
    </div> 
</div></div></div>

Meinen jQuery-Code

$(":checkbox").change(function() { 
$(this).closest('[ng-repeat*="item"]').nextAll('[ng-repeat*="item"]:lt(3)').find('[type="checkbox"]').prop('checked', this.checked); 
    });

so dass es nicht funktioniert, wenn der Inhalt über Ajax geladen wird, eine Ahnung, wie es zu machen, zu arbeiten, wenn Der Inhalt wird beim Laden der Seite über Ajax geladen und es werden auch mehr Kontrollkästcheneinträge geladen, wenn der Benutzer nach unten scrollt.

Arbeits jsfiddle mit statischen Kontrollkästchen Liste :: https://jsfiddle.net/mmzth076/7/ aber nicht mit Ajax arbeiten

Quelle

2016-06-16 user889030

wo binden Sie das Änderungsereignis ein? Ich gehe davon aus, dass die Elemente als Ergebnis der Ajax-Antwort erstellt werden? Wenn dies der Fall ist, müssen Sie die Änderung binden, nachdem die Elemente erstellt und im DOM verfügbar sind. –

Ihr jquery Code wird wahrscheinlich einmal in der Dokumentbereitschaftsroutine ausgeführt, so dass alle zu diesem Zeitpunkt verfügbaren Kontrollkästchen gefunden und konfiguriert werden Ändern Sie den Ereignishandler für sie. In Bezug auf den HTML-Code, den Sie in einem Ajax-Aufruf erhalten, fügen Sie ihn wahrscheinlich zu einem bestimmten Zeitpunkt in das DOM ein. Dies ist ein guter Zeitpunkt, um den Change-Event-Handler für diesen neuen HTML-Code einzurichten. – JustAndrei

können Sie mir sagen, wie kann ich Kontrollkästchen Änderung Funktion binden – user889030

Versuchen Sie, die Änderungsfunktion für den Erfolg Handler von der Ajax-Zugabe:

$.ajax { 
    method: 'GET', 
    success: function() { 
    load_grid(); //Code that builds the grid with the checkboxes 
    $(":checkbox").change(function() { 
     $(this).closest('[ng-repeat*="item"]') 
     .nextAll('[ng-repeat*="item"]:lt(3)') 
     .find('[type="checkbox"]') 
     .prop('checked', this.checked); 
    }); 
    } 
}

Sie können auch alle bekannten Eltern des Gitters verwenden, die im DOM zum Zeitpunkt der Bindung des Klick verfügbar ist Ereignishandler.

$('body').on('change', ":checkbox", function() { 
    $(this).closest('[ng-repeat*="item"]') 
     .nextAll('[ng-repeat*="item"]:lt(3)') 
     .find('[type="checkbox"]') 
     .prop('checked', this.checked); 
});

Ersetzen Sie Körper mit einem bekannten Vorgänger zum Zeitpunkt der Bindung.

Quelle

2016-06-16 23:24:11

Ich habe keinen Zugriff auf AJAX-Funktionen der Webseite, wie schreibe dieses Skript für Office 365 – user889030

Just habe meine Antwort aktualisiert, um ein bekanntes DOM-Element zum Zeitpunkt der Bindung zu verwenden. –

danke :) ............. – user889030

Wenn Sie über Ajax enthalten laden, es ist, es wird die das geänderte Ereignis nicht ausgelöst. Wenn Sie einen Trigger auslösen möchten, verwenden Sie einfach jquery und lösen Sie das Ereignis manuell aus.

$('checkboxyouwanttotrigger').trigger('change')

Quelle

2016-06-16 23:11:17 chungtinhlakho

JQuery Änderungsfunktion nicht mit Ajax Inhalt

Antwort

Verwandte Themen