html lists - tab not working when dynamically added using jquery -

मैं मौजूदा jquery UI टैब का उपयोग कर रहा हूं ..

  & lt; div id = " टैब "& gt; & LT; ul & gt; & Lt; li & gt; & lt; a href = "# टैब -1" & gt; शीर्षक 1 & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "# टैब -2" & gt; शीर्षक 2 & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "# टैब -3" & gt; शीर्षक 3 & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; div id = "tabs-1" & gt; & Lt; p & gt; t1 सामग्री & lt; / p & gt; & Lt; / div & gt; & Lt; div id = "tabs-2" & gt; & Lt; p & gt; टी 2 सामग्री & lt; / p & gt; & Lt; / div & gt; & Lt; div id = "टैब -3" & gt; & Lt; p & gt; टी 3 सामग्री & lt; / p & gt; & Lt; / div & gt; & Lt; / div & gt; जब ब्राउज़र में गाया जाता है, तो jquery कक्षाओं के कुछ सेट को & lt; li & gt; तत्वों। [नीचे दिए गए कुछ हिस्से] & lt; ul class = "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role = "tablist" & gt; & Lt; li class = "ui-state-default ui-corner-top ui-tabs-active ui- राज्य-सक्रिय" भूमिका = "टैब" tabindex = "0" aria-controls = "tabs-1" aria-labelledby = "Ui-id-1" aria-selected = "true" aria-expanded = "true" & gt; & Lt; li वर्ग = "ui-state-default ui-corner-top" भूमिका = "टैब" टैबिंडेक्स = "- 1" एरिया-नियंत्रण = "टैब -2" एरिया-लेबल द्वारा = "यूआईआईडी -2" एरिया- चयनित = "गलत" एरिया-विस्तारित = "गलत" & gt; & Lt; li class = "ui-state-default-UI-corner-top" भूमिका = "टैब" टैबिंडेक्स = "- 1" एरिया-नियंत्रण = "टैब-3" एरिया-लेबल द्वारा "= UI-id-3" aria- चयनित = "गलत" एरिया-विस्तारित = "गलत" & gt; & Lt; / ul & gt; जब मैं कुछ & lt; li & gt; तत्वों में & lt; ul & gt; निम्नलिखित jquery कोड का उपयोग कर: $ ('# टैब उल') .एंडेंड ($ ('& lt; li & gt; & lt; a href = "# टैब -4" & gt; शीर्षक 4 & lt; / a & gt; & lt; / li & gt;') ;  

सूची जोड़ दी जाती है लेकिन वर्गों को इसमें जोड़ा नहीं जाता है, इसलिए टैब कार्यक्षमता को प्रदर्शित नहीं किया जाता है।

कृपया इसमें कुछ अंतर्दृष्टि दें।

आपको टैब को टैब आईडी से जोड़ना होगा:

  var num_tabs $ ('Div # tabs ul li.tab')। लंबाई + 1; $ ('div # tabs ul')। अनुलग्नक ('& lt; li class = "tab" & gt; & lt; a href = "# tab- '+ Num_tabs +' "& gt; अनुभाग '+ num_tabs +' & lt; / a & gt; & lt; / li & gt; '); $ (' div # tabs ')। अनुलग्नक (' & lt; div id =" tab- '+ num_tabs  

फिर टैब पर रीफ्रेश करें :

  $ ( "Div # tabs")। टैब ("ताज़ा करें");