This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
hello people here is my ajax output...
$(function(){
//after ajax request
success:function(data){
$('#inbox').html('<div class="inbox_user" id='+data+'>'+data+'</div><br>')
}
})
Div is creating successfully,so Iam very sure no issues with ajax code....but now i have to give click event to class .inbox_user ,,,its not working with no error message on console... click event for #inbox works fine..... any idea to fix this??
i am trying in normal way $('.inbox_user').click(function(){})
try this :-
$(document).on('click', '.inbox_user',function(){
alert(1);
});
Demo
Related
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 6 years ago.
I have a problem, with AJAX submit of forms.
I have a piece of code like that:
$("#content").html("<form id='requestInfo'>............</form");
That put in a div with id=content the piece of code that creates a form.
I have another piece of code:
$("#requestInfo").submit(function( event ) {
event.preventDefault();
...code...
});
I would expect an execution of the code inside the submit() method where I can do my things with data of that form, but I get a refresh of the page, instead.
Does anyone know what could be the problem? It should be compatible with all browsers.
Thanks!
You are creating your form dynamically thus standard event binding will not work. You need to use event delegation
$("#content").on('submit', '#requestInfo', function(evt) {
evt.preventDefault();
});
You have to call e.preventDefault(); and return false
$("#requestInfo").submit(function( event ) {
// Code here
event.preventDefault();
return false;
});
This question already has answers here:
Click event on select option element in chrome
(13 answers)
Closed 6 years ago.
I've got the following snippet of code on my webpage:
$('#activityFilter option').on('click', function() {
var text = document.getElementById("tableFilter").value;
searchTable(opts, text);
$('.spotRow').first().click();
});
In my index.html file, there is a drop-down <select id="activityFilter">, and I'm trying to call searchTable whenever the user selects a new item on this drop-down. However, it seems like the .on('click') is never triggered in Chrome or Safari. However, it's working fine in Firefox and IE. Any suggestions?
Try to use the jQuery's click instead of attaching an event
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
JavaScript does not fire after appending [duplicate]
(3 answers)
Closed 7 years ago.
Working on a poll/voting system where people can click to see results before voting, and then click back again to see the options once more.
The problem is when loading in the results, the button I load to show the options again won't seem to work:
The code for them is basically the same (I've put an alert to test if it was even picking up the button, it is not):
$('.results_button').click(function() {
var poll_id = $(this).data('poll-id');
$('.poll_content').load('/includes/ajax/poll_results.php', {'poll_id':poll_id});
});
$('.back_vote_button').click(function() {
window.alert("Test");
//var poll_id = $(this).data('poll-id');
//$('.poll_content').load('/includes/ajax/poll_options.php', {'poll_id':poll_id});
});
The actual code to the back_vote_button is this for example:
<button name="pollresults" class="back_vote_button" data-poll-id="1">Back to voting</button>
Is there something I am missing about interacting with jquery loaded content?
Is your button being created after the doc is loaded? If doesn't exist at the time that the document is created, the listener is not bound. You can either bind a listener event or you can change the click to listen to an already created object, for a bad example try this:
$(document).on('click', '.back_vote_button', function(){
window.alert("Test");
});
this should work but it will listen every time you click on the body and then determine what you clicked on if this were the problem.
This question already has answers here:
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 7 years ago.
$(".closeBtn").on('click',function(){
alert('');
});
+function myfunction(){
$(".elem").on('click',function(){
$("#someId").html('<img class="closeBtn" src=""/>'
);
});
}();
I used html to add some element into somewhere, I checked my dom and things are there. When I click the binded element closeBtn, it doesn't have respond. I thought using on() will work? or it's closure problem?
You need to use:
$("body").on('click','.closeBtn',function(){
alert('test');
});
Check Syntax For event delegation using on
This question already has answers here:
In JavaScript can I make a "click" event fire programmatically for a file input element?
(29 answers)
Closed 9 years ago.
I get the input file element, and try to click on it in js on Chrome console, but it does not work and the file upload dialog does not appear. How can I achieve this?
document.getElementById("input_file").click();
try with onClick:
document.getElementById("input_file").onclick = function(){
//code for the action when clicked
};
Look here: http://jsfiddle.net/ghP2Y/1/