Jquery mit div in html5 arbeiten <template> tag

Aus irgendeinem Grund haben wir eine Seite, mainpage.html mit Abschnitten in <template>...</template> Tags eingewickelt. Normalerweise werden die Abschnitte nicht beim Laden der Seite gerendert, aber ist es eine Möglichkeit, jquery zu können acccess ein Div innerhalb eines <template> Tag auf Lade Seite mainpage.html und führen Sie das folgende Skript zu erhalten:Jquery mit div in html5 arbeiten <template> tag

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#inner-div").click(function(e) { 
     alert('The div was clicked'); 
     }) 
    }); 
    </script>

Unter der Annahme, mainpage.html ist:

<html> 
<head> 

<script src="/path/to/jquery"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#inner-div").click(function(e) { 
     alert('The div was clicked'); 
     }) 
    }); 
    </script> 


</head> 


<body> 

<template id="temp1"> 


<div id="inner-div"> </div> 


</template> 


<template id="temp2"> 


</template> 


<template id="temp3"> 


</template> 


</body> 

</html>

Quelle

2017-11-08 bodesam

Dies ist ein Duplikat von this question.

Da das Element dynamisch erstellt wird, müssen Sie ändern, wie Sie darauf zugreifen. Anstatt direkt auf #inner-div zu zielen, sollten Sie auf den body oder den übergeordneten Container zielen.

Quelle

2017-11-08 04:23:21 jmaz

jQuery click Funktion wird keine Event-Handler anhängen, wenn der div nicht gemacht wird, wenn das Skript ausgeführt wird.

Stattdessen können Sie die on Funktion von jQuery verwenden.

$(document).ready(function() { 
    $("#temp1").on("click","#inner-div",function(e) { 
    alert('The div was clicked'); 
    }) 
});

Hier wird das #inner-div Element muss nicht notwendigerweise zu der Zeit vorhanden sein, wenn dieses Skript ausgeführt wird.

Quelle

2017-11-08 04:21:03 vatz88

Jquery mit div in html5 arbeiten <template> tag

Antwort

Verwandte Themen