This question already has answers here:
How to select an element loaded through the jQuery load() function?
(2 answers)
Closed 6 years ago.
I am loading data into
<div id="content_8">
</div>
using the following function:
...
var number = 8; //i.e.
$.ajax
({
url: "load.inc.php",
dataTypeString:"html",
data: "var="+number,
success: function(html)
{
$('#content_'+number).html(html);
}
});
This works well, but: the html contains different IDs and the loaded html looks like for example
<tr id="someid_8_1234">...</tr>
<tr id="someid_8_7294">...</tr>
<tr id="someid_8_9999">...</tr>
Since they are not yet registered in the DOM, I can't use this code
$('[id^=someid_]').click(function(){
$(this).toggle();
});
I am getting crazy, all hints I found so far point me to delegate() or live() which I don't understand and they mostly point to single examples but not to hundreds of IDs, is there a way to attach the whole HTML-Block in the DOM?
Thanks in advance!
use this for dynamcically created elements:
$(document).on('click','[id^=someid_]',function()
{
///your code
});
Maybe ...
success: function(html) {
var newContent = $.parseHTML(html)
$('#content_'+number).html(newContent);
$('[id^=someid_]', newContent).click(function(){
$(this).toggle();
});
}
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I am using the following jQuery code in the search bar of my website. Since I am a beginner, I am unable to relate to other code examples, hence I need help in fixing the code.
jQuery(document).ready(function ($) {
//Open Link in Search Results in New Window
jQuery('div.search_result_item_content').click(function () {
console.log("I am executed");
var menuLink = $('div.col.col-9.search_result_item_content').data('link');
window.open(menuLink, "_blank");
});
});
The code without .ready() seems to work on the console. But not on the index.js file of my website. The same file has many other jQuery functions, which are all working smoothly.
Any idea, what is causing the issue?
You are generating the items dynamically so this will not work. What you can do is what I will do below.
jQuery(document).ready(function ($) {
jQuery(document).on('click','div.search_result_item_content',function () {
console.log("I am executed");
var menuLink = $(this).data('link');
window.open(menuLink, "_blank");
});
That should work for you.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I have two pages, first page is having html now i am calling first page html on the second page via jquery and the code is given below.
$(".cat_ring").click(function(){
var x =$(this).val();
var alphabet=$('.soganii').val();
$.ajax({
url : '******************',
method : 'POST',
data : {id:x, alpha:alphabet},
success : function(data){
$(".soganiiiii").html(data);
}
});
});
now the html part which i am fetching from previous page to new page having one radio button. by which i want to show & hide a div. which i am trying to do by below code.
$('.custom').click(function () {
alert();
$('#product').show('fast');
});
$('#product1').click(function () {
$('#product').show('fast');
});
i can show the previous page html content to new page but my js is not working when i want to use radio button of fetched content.
Thanks in advance
You need to delegate your events because you have dynamically added elements
$('.soganiiiii').on('click','.custom',function () {
alert();
$('#product').show('fast');
});
$('.soganiiiii').on('click','#product1',function () {
$('#product').show('fast');
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have an html page which gets loaded via ajax, the newly loaded html content has the following html. It typically works great when I load the html first and then initialize the javascript.
Change password
My js:
$('.ajax-button').on('click', OnLoadContent);
function OnLoadContent(e) {
e.preventDefault();
var pageurl = $(this).data('url');
$.ajax({
type: "GET",
url: pageurl,
success: function(data) {
alert(data);
$("#content-container").html(data);
window.history.pushState({path:pageurl}, '', pageurl);
},
error: function(response) {
alert("ERROR:" + response.responseText);
}
});
}
However since it's new html content that's being loaded I think the problem is the javascript already exists when the html content is loaded via ajax, so the click functionality doesn't work unless I click again. I'm wondering how I can fix this?
Delegate the click higher up the dom...
$('body').on('click', '.ajax-button', OnLoadContent);
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
Having a bit of trouble figuring out what is going wrong here and wondered if anyone might be able to help me out. I'm using JQuery throughout my site but for some reason on this particular page it does not seem to be working.
This code here:
$("#keyword").autocomplete({
source:'../../pages/ajax/autocomplete/autocomplete_tags.php',
dataType: 'json',
minLength:1
});
//When you hit the search button load the new tags
$("#srchBtn").click(function(e){
e.preventDefault();
var tag_name = $('#keyword').val();
$(".dashboardtable").load('../../pages/ajax/autocomplete/search_tags.php', {tag_name: tag_name },function(response, status, xhr){
$(".dashboardtable").html(response);
$("#keyword").val("");
$("#keyword").attr("placeholder", "Search Tags...");
});
});
What should happen is when the user begins typing it begins pulling suggestions out of the database and when they click the search button it loads the results into a div using AJAX. I noticed it wasn't working and I decided I'd try a simple test:
$('#srchBtn').click(function(){
console.log('hit');
})
But nothing appeared in the console. I then tried
console.log($('#srchBtn')); and It does seem to be getting a reference to my dom object, it just isn't firing the click event for some reason.
I've got the following scripts at the top of the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="../scripts/auto-complete/tag_list_search.js"></script>
and I am getting no errors in my console. So what could possibly be the problem? Any help is much appreciated. Also this is my HTML:
<input type="text" id="keyword" placeholder="Search Tags..." size="33"/>
<input type="button" class="" id="srchBtn" value="Search"/>
Please wrap the code in jquery ready function...(in case this is not done)
$(function(){ // jquery ready function
$("#keyword").autocomplete({
source:'../../pages/ajax/autocomplete/autocomplete_tags.php',
dataType: 'json',
minLength:1
});
//When you hit the search button load the new tags
$("#srchBtn").click(function(e){
e.preventDefault();
var tag_name = $('#keyword').val();
$(".dashboardtable").load('../../pages/ajax/autocomplete/search_tags.php', {tag_name: tag_name },function(response, status, xhr){
$(".dashboardtable").html(response);
$("#keyword").val("");
$("#keyword").attr("placeholder", "Search Tags...");
});
});
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to use a variable in place of ID in jquery
I have the function called makeinvisible and one of the parameters is supposed to be a jQuery id selector for an image with id=testimage. JavaScript does not recognize it as such, hence the image does not become hidden.
function makeinvisible (imageid){
$("#imageid").css("visibility","hidden")
}
$(document).ready(
makeinvisible("testimage")
)
Any help appreciated!
The code as written is looking for an element with id=imageid.
Try:
function makeinvisible (imageid){
$("#" + imageid).css("visibility","hidden")
}
$(document).ready(
makeinvisible("testimage")
)
Edit: Your document.ready call is also incorrect. The way you have it written makeinvisible is being executed immediately, not on document ready. It needs to be:
$(document).ready(function(){ makeinvisible("testimage"); });