2011-06-17 18 views
24

मैं तत्व बनाने के बाद एक फ़ंक्शन कॉल करना चाहता हूं। क्या इसे करने का कोई तरीका है?jquery में तत्व बनाने के बाद मैं फ़ंक्शन कैसे कॉल कर सकता हूं?

उदाहरण:

$("#myElement").ready(function() { 
    // call the function after the element has been loaded here 
    console.log("I have been loaded!"); 
}); 
+0

संदर्भ क्या है:

इस के लिए, मैं एक पूर्वनिर्धारित समारोह जो मैं पुन: उपयोग किया है? –

+0

मुझे नहीं पता, मैंने इसे WYSIWYG संपादक में लिखा था। मैंने इसे लोगों को एक उदाहरण देने के लिए लिखा जो मैं पूरा करने के लिए देख रहा हूं। –

+1

जब आपका मतलब बनता है, तो क्या आपका मतलब डोम में शामिल है? – Tomgrohl

उत्तर

35

कैसे आप तत्व पैदा कर रहे बनाने के बाद कॉलबैक आह्वान करने के लिए है?

यदि आप इसे स्थिर HTML में बना रहे हैं तो बस .ready(handler) या .on("load", handler) का उपयोग करें। यदि आप AJAX का उपयोग कर रहे हैं हालांकि यह मछली का एक और केतली है।

आप jQuery के load() समारोह का उपयोग कर रहे हैं तो वहाँ एक कॉलबैक आप चला सकते हैं जब सामग्री लोड किया गया है:

$('#element').load('sompage.html', function(){ /* callback */ }); 

आप jQuery के $.ajax या $.get/$.post कार्यों का उपयोग कर रहे हैं तो एक सफलता कॉलबैक वहाँ कि:

$.ajax({ 
    url: 'somepage.html', 
    success: function(){ 
    //callback 
    } 
}); 

तुम सिर्फ तत्व बना रहे हैं और इस तरह से यह जोड़कर:

$('body').append('<div></div>'); 

तो फिर तुम इस के बजाय कर सकते हैं:

$('<div />', { id: 'mydiv' }).appendTo('body').ready(function(){ /* callback */ }); 

लेकिन इस मामले नहीं होगा - क्योंकि यह तुल्यकालिक है (जिसका अर्थ है जब तक यह डोम के तत्व जोड़ दिया जाता है कि कोड की अगली पंक्ति नहीं चलेंगे वैसे भी ... - आप छवियों को लोड जब तक कर रहे हैं और इस तरह) ताकि आप बस कर सकते हैं:

$('<div />', { id: 'mydiv' }).appendTo('body'); 
$('#mydiv').css({backgroundColor:'red'}); 

लेकिन acctually करते हुए कहा कि तुम सिर्फ ऐसा कर सकता है:

$('<div />', {id:'mydiv'}).appendTo('body').css({backgroundColor:'red'}); 
+0

हाहा :) इसका उदाहरण आपने भी दिया! : मुझे खुशी है कि यह काम कर रहा है –

+0

इस जवाब को खोजने के लिए मुझे बहुत लंबा रास्ता लगा, लेकिन यह बहुत अच्छा काम करता है और इसे कार्यान्वित करना आसान है। धन्यवाद! – jopeek

7

आप jQuery live घटनाओं पर गौर कर सकते हैं। आप किसी इवेंट हैंडलर को किसी चयनकर्ता से संलग्न करते हैं जो या तो आपके मेल में अतिरिक्त तत्व बनने के बाद या उससे मेल खाता है।

तो तुम एक <ul> है और आप गतिशील रूप से नई <li> आइटम बनाते हैं, में अपने $(document).ready() आप एक ईवेंट हैंडलर के लिए एक चयनकर्ता ऊपर तार कर सकते हैं ताकि आपके <li> सभी तत्वों का है कि घटना के लिए स्थानांतरित कर दिया जाएगा।

यहां jsFiddle नमूना है जो डेमो live है।

उम्मीद है कि इससे मदद मिलती है।

+0

मैंने लाइव इवेंट्स में देखा है, लेकिन जब मैंने "क्लिक", "माउस ओवर" या किसी अन्य श्रोताओं के बिना लाइव इवेंट को लागू करने का प्रयास किया, तो यह मुझे एक त्रुटि देता है जिसमें इसमें विभाजन नहीं होता है। –

+0

मुझे समझ में नहीं आता कि इसका क्या अर्थ है विभाजन नहीं है? मुझे खेद है अगर मुझे समझ में नहीं आ रहा है। –

+0

यह अच्छा था ... मैं सामान्य वाक्यविन्यास में बहुत सारे कार्यों की घोषणा करता हूं, क्या उन्हें बदलने के लिए कोई अन्य तरीका है? –

-1

सबसे सीधी-सपाट सीधे तत्व :)

1

चेक आउट।रहते हैं() बनाया तत्व के बाद अपने सबसे अच्छे रूप ,,

$('.clickme').live('click', function() { 
     // Live handler called. 
    }); 

    And then later add a new element: 

    $('body').append('<div class="clickme">Another target</div>'); 
+0

यह jQuery के निचले संस्करणों पर काम करता है। जैसे 1.6 – Fury

0
$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){ 

    console.log("I have been created!"); 

}); 
1

आप इस कोड

$('body').on('click', '#btn', function() { 
 
    $($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000); 
 
})
#old > div{ 
 
    width: 100px; 
 
    background: red; 
 
    color: white; 
 
    height: 20px; 
 
    font: 12px; 
 
    padding-left: 4px; 
 
    line-height: 20px; 
 
    margin: 3px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Test</title> 
 
    <link rel="stylesheet" href="./index.css"> 
 
    </head> 
 
    <body> 
 
    <div> 
 
     <!-- Button trigger modal --> 
 
     <button type="button" id="btn">Create Div</button> 
 
     <div id="old"> 
 

 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </body> 
 
</html>

1

कभी कभी यह बनाया कि DOM तत्व/लोड के लिए आवश्यक है की कोशिश कर सकते अपनी खुद की लिपि के बाहर, या तो एक अलग जेएस लाइब्रेरी या आपके प्रत्यक्ष नियंत्रण के बाहर एक घटना द्वारा।

ऐसे परिदृश्यों के लिए, मैं हमेशा एक अंतराल निर्धारित करता हूं जो समय-समय पर जांचता है कि लक्ष्य तत्व मौजूद है या नहीं और यदि यह सत्य है, तो अंतराल स्वयं को हटा देता है और कॉलबैक फ़ंक्शन चलाता है।

function runAfterElementExists(jquery_selector,callback){ 
    var checker = window.setInterval(function() { 
    //if one or more elements have been yielded by jquery 
    //using this selector 
    if ($(jquery_selector).length) { 

     //stop checking for the existence of this element 
     clearInterval(checker); 

     //call the passed in function via the parameter above 
     callback(); 
     }}, 200); //I usually check 5 times per second 
} 

//this is an example place in your code where you would like to 
//start checking whether the target element exists 
//I have used a class below, but you can use any jQuery selector 
runAfterElementExists(".targetElementClass", function() { 
    //any code here will run after the element is found to exist 
    //and the interval has been deleted 
    }); 
संबंधित मुद्दे

 संबंधित मुद्दे