Wie können Sie eine persistente Checkbox haben, die jedes Mal ein div öffnet oder schließt, wenn es in JQuery überprüft wird?

Wenn also die Seite geladen wird, wird das Kontrollkästchen aktiviert und eine Funktion ausgeführt, wenn sie aufgerufen wird. Sobald die Seite geladen ist, reagiert das Kontrollkästchen nicht mehr und wird nach diesem Punkt nichts mehr tun. Die erste Dropdown-Liste lädt die test1.php, aber die Kontrollkästchen in test1.php tun nichts.Wie können Sie eine persistente Checkbox haben, die jedes Mal ein div öffnet oder schließt, wenn es in JQuery überprüft wird?

Wie machen Sie ein Kontrollkästchen innerhalb der zweiten Seite, die geladen wird?

$(document).ready(function(){ 

$('#modal123').on('shown.bs.modal', function (event) { 
    $('#allsites').on('change', function() { 
     //alert("test"); 
    $("#test1").load("test1.php"); 

    }); 

$("#California :checked").on("change", function(){ 
    $("#test1").load("test2.php"); 
}); 



    }) //end modal 
}); //end script

HTML:

<body> 
<div><a href="#" 
class='btn btn-default' 
role='button' 
data-toggle='modal' 
data-target='#modal123' 
>modal1</a> 
</div> 
                <div id='integrate_employee_popup1'></div> 
         <!-- modal pop up for [view audits] button --> 
<div class="modal fade" style="z-index:10000" id="modal123" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
      <h4 class="modal-title">View car</h4> 
      </div> 
      <div class="modal-body"> 
       <select id="allsites"> 
        <option value="Site1">Site1</option> 
        <option value="Site2">Site2</option> 
       </select> 

       <div id="test1"></div> 

       <div id="test2"></div> 
      </div> 
      <div class="modal-footer"> 
      <form method = "POST"> 
       <input type="button" id="yes_delete" value="Yes " name="view_audits_delete" /> 
       <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
      </form> 
       </div> 
     </div> 


    </div> 
</div>  
</body> 
</html>

test1.php

<?php print '<form> 
    <input type="checkbox" name="detailsgiven" id="California" >California 
    <br> 
    <input type="checkbox" name="detailsgiven" id="Georgia" >Georgia 
    <br> 
</form>'; ?>

test2.php

<?php print "Test2"; ?>

Quelle

2016-07-21 Anonymous

Verwenden event delegation Ereignis-Listener für Elemente zu schaffen, die noch nicht existieren

$(document).on("change", "#California", function(){ 
    if(this.checked){ 
     $("#test1").load("test2.php"); 
    } 
});

Quelle

2016-07-21 15:18:55 charlietfl

hätte ich nie gedacht, aber es macht Sinn! –

Dieser Code unten sollte das tun, was Sie brauchen, um es zu. Das Problem besteht darin, dass Sie den Listener beim Laden der Seite hinzufügen, bevor eine Option ausgewählt und die Kontrollkästchen erstellt werden. Die Elemente müssen vorhanden sein, wenn Sie ein Ereignis an sie binden. Fügen Sie also diesen Code nach ein, laden Sie die Checkboxen in das DOM. Sie können Ihrem LOAD-Ereignis einen Callback hinzufügen, der nach dem Einfügen der Elemente ausgelöst wird.

$("#test1").load("test1.php", function() { 
    //After loading test1.php and the elements are inserted into the dom, attach the listener 
    $('#California').on('click', function(e) { 
     if ($(this).is(':checked')) { 
      alert('checked'); 
     } 
    }); 
});

Quelle

2016-07-21 15:16:11

Er Hinzufügen des Elements asynchron über .load(), so gibt es nicht Art und Weise zu Stellen Sie sicher, dass dies nach dem Laden des Elements ausgeführt wird, wenn Sie keine delegierten Ereignisse verwenden – Cruiser

* "Nach dem Laden" * erfordert die Verwendung von Lade-Callback, dass OP – charlietfl

@Cruiser nicht wirklich wahr ist ... 'load()' hat Erfolg Callback-Argument zur Verfügung sowie Versprechen Callbacks – charlietfl

Sie müssen delegierte Ereignisse verwenden, wenn Ihr jquery-Skript geladen wird, das Element #California ist noch nicht vorhanden. Sie können dies tun, indem Sie einen Selektor auf ein .on() Ereignishandler hinzu:

$('#test1').on('click','#California',function(){ 
    // code that happens when you click 
});

Sie andere Veranstaltungen nutzen können als nur die auch Ereignis ‚Klick‘. Siehe die JQuery API-Dokumentation hier für weitere Informationen: http://api.jquery.com/on/

Quelle

2016-07-21 15:17:11 Cruiser

Meine Antwort ist fast identisch wie die, die Sie akzeptiert haben. – Cruiser

Wie können Sie eine persistente Checkbox haben, die jedes Mal ein div öffnet oder schließt, wenn es in JQuery überprüft wird?

Antwort

Verwandte Themen