I actually got some problems with my script: indeed it needs 2 clicks to work in a click event. The script is this:
$('td#td_new').live('click', function() {
$.ajax({
type: 'GET',
url: 'add_hobby.php',
data: { hobby: $('#ricerca_interests').val() },
success: function(msg) {
nuovo_hobby="<tr id='hobby' class='checked' selezionato='si' hobby_id='"+msg+"' ><td id='hobby' width='179px'><div id='nome_hobby'>"+$('#ricerca_interests').val()+'</div></td></tr>';
$(nuovo_hobby).appendTo("#interessilista");
$('tr#new_hobby').hide().remove();
},
error: function() {alert("Error. Try later.");}
});
});
As of jQuery 1.7, the .live() method is deprecated. you should Use .on() to attach event handlers.
it doesn't seems that your code generate something that can cause a second click need... but try changing-
$('td#td_new').live('click', function() {
to
$(document).on('click','#td_new', function() {
then open firebug or add a console.log('something') in the success: part - and make sure that the ajax request finishes as wanted and not continuing to run.
other then that we need some more code...
have fun.
EDIT:
I tried to understand what you are trying to do according to the code you upload, but
there is noway to test it, so here are some insights for you:
Include your source scripts (jquery + UI etc) in the head section.
Remove jquery.min... source - you don't need it because you include the full script any way.
I recommend upgrading to jquery 1.9... you are using 1.7.2
When using same identifier over different elements you should use class not id to declare them.
I recommend you to attach the click event to the div add_hobby as a class and not to the td.
Here is a small demo of the usage of on() and appending code to your page:
jsfiddle Demo
Now feel free to direct me to your exact problem.
Related
hey all i am appending a form to a page on click the form has some text boxes and i need to add event listner like on keypress but the function dosent works dont know where is the problem the function works well everywhere but not for this form here is the code.
appending the form
function activityCHART(thisobj){
var theidis=$(thisobj).attr("id");
$("#FULL_FADE").fadeIn();
$.ajax({
type: 'post',
url: 'newpage.php',
data:{'actde':theidis},
success: function(dataa){
$("#the_APPEDEDr5").empty().append(dataa);
}});}
newpage this textbox is present and some more text areas
<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi"/>
add this event listner
$('#detp_names09o').keypress(function (e) {
alert('ok');});
these are some script links
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
i think there are some script link problem
alert comes when i does it like this onkeyup="thisisfun();" function thisisfun(){ alert('ok'); }
You should use live(), delegate() or on() to attach event listeners to dynamically added DOM elements. bind() and keypress() doesn't work for elements that are dynamically added to DOM[see this]
$('#detp_names09o').live("keypress",function (e) {
//do some stuff
});
.on() is mostly syntax sugar that can mimic .live(), or .delegate() depending on how you call it.
$('#detp_names09o').on("keypress",function (e) {
//do some stuff
});
Also, you have specified two different versions of jQuery. Though CDN's do have some advantages over locally referenced libraries, they might break your code at-times.
If thats the reason you've referenced to local jQuery file(along with CDN version), you might consider looking at CDN fallbacks. In either case, you should be careful about the version you are using.
Cheers!
To attach event to dynamically added elements,
Try binding the event using 'bind'
$('#detp_names09o').bind("keypress",function (e) {
alert('ok');
});
or use 'on'
$('#detp_names09o').on("keypress",function (e) {
alert('ok');
});
Also you dont require two versions of jquery in your page, also make sure this id is not duplicated
use onkeyup,.. attribute inside the element and call the function like this
<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi" onkeyup="functionName()"/>
in javascript
function functionName(){
//your code
}
First of all you should decide what do u want to use, keyup or keypress ? For example if you want to use keyup and you are using jquery version greater than 1.7 then use
$(document).ready(function () {
$('#element').on("keyup",function () {
alert('result ok');
});
});
else u can use
$(document).ready(function () {
$('#element').live('keyup', function() {
alert('result ok');
});
});
Make sure that you are calling working script (check your script link), try not to make duplicate ids of elements instead use class and avoid using inline use of javascript. Happy Coding !
I have buttons that will be created and destroyed. I have this code below. #showContainer is what is ajax'ing, click is the action, showPrevious is the button that the user interacts with.
$("#showContainer").on( "click", "#showPrevious", function()
{
$.ajax(
{
url: "flip/showprevious.php",
cache: false,
success: function(html)
{
$("#showContainer").html(html);
}
});
});
This is valid JavaScript according to jsHint. When this is added, this and all the lines of code below it do not work. My cPanel and WAMP server is showing no errors. I have read the jQuery documentation on .on() exhaustively.
Troubleshooting I have tried attaching .on() to several different possible parent elements that already exist on page on load. I have tried attached .on() to other buttons to see if it was a problem with the button, but that has also not worked. I thought it might have something to do with the fact I'm recreating something that use to exist and it's confusing my code. I tried changing id to class and # to . accoridingly, but that also did not work. Regardless, none of those should have broken the javascript code anyways. I am sure it is the code I am sharing here. When I comment it out, everything else works as expected.
A note. I was using .click(), and it works for the first click, but after that click, the showPrevious button is recreated, and .click() will no longer work because the new showPrevious was not on the page at load.
Summary Well, that's all the info I have. I can't imagine the rest of the code is relevent, but if it is, tell me what to look for.
It should be like this :
$(document).on("click","#showContainer #showPrevious", function()
{
$.ajax(
{
url: "flip/showprevious.php",
cache: false,
success: function(html)
{
$("#showContainer").html(html);
}
});
});
HTML on the body works, but one coming from PHP doesn't respond at all, why? How do i solve this?
Here's how i'm generating the HTML.
<?php
echo '<div id="TestClick">Click me</div>'
?>
and JavaScript.
$('#TestClick').click(function(e){
alert ('working')
});
But the works.
<body>
<div id="TestClick">Click me</div>
</body>
ok here's how im getting that html from PHP using ajax.
$.ajax({
type:"GET",
url:"../php/feed.php"
}).done(function(feedback){
$('#feed').html(feedback)
});
If your JavaScript is in the HEAD of the page, make sure you wait for document.ready event to bind the DOM events.
$(document).ready(function() {
$('#TestClick').click(function(e){
alert ('working')
});
});
This is a general best practice because the DOM (the HTML code) need to be parsed before JavaScript can interact with it.
Note that there's a shorthand with jQuery $(document).ready:
$(function() {
$('#TestClick').click // etc ...
});
If you're loading this element via AJAX, then you need to handle events once the AJAX request is completed and element added to the DOM. Also, you can use events bubbling to delegate the event listener on a higher level DOM element (for example document).
$(document).on('click', '#TestClick', function() { /* your stuff */ });
Last but not least, make sure you don't have duplicated ID in your DOM. This could cause breakage too.
Probably your element is being created after the click handler is called and as it is not there, the handler is not attached.
Try running that javascript after the php code
EDIT
try
$.ajax({
type:"GET",
url:"../php/feed.php"
}).done(function(feedback){
$('#feed').html(feedback);
$('#TestClick').click(function(e){
alert ('working')
});
});
When you load something using AJAX after the page was loaded, the .click() event has been binded to the existing DOM Elements, but not to the new ones.
You could try this:
$.ajax({
type:"GET",
url:"../php/feed.php"
}).done(function(feedback){
$('#feed').html(feedback).click(function(e){
alert ('working')
)};
});
});
i am modifying the inner html through javascript, and the inner html involves a button
but when i put in the jquery code to run on the button click event it fails to do so ..
sorry but im a newb when it comes to javascript
content im adding into the html ..
function add()
{
var val=document.getElementById("ans").value;
document.getElementById("answers").innerHTML+="<tr><td>"+val+"<br/><p align=\"right\"><button class=\"replyb\">replies</button></p>"+"</td></tr>";
document.getElementById("ans").value="";
}
jquery code ...
enter code here
At a guess, because we don't have your jQuery, I would say you need to use .live() instead of .click() when you change the HTML the button will be NEW to the DOM.
When you apply your jQuery code, it adds any calls like .click() to any DOM item, when the page loads. So any NEW element doesn't have a .click() handler added to them.
Do solve this, you can change your .click():
$('#someitem').click(function() {
.....
});
To something like this:
$('#someitem').live('click', function() {
.....
}
Add the following in your page at some place and it will handle clicks to all .replyb buttons whether you add them with javascript at any time, or not.
$(function(){
$('button.replyb').live('click', function(){
alert('clicked on button');
});
});
have a look at jquery .live() method
I'm placing content on my page through an ajax (post) request like so:
$("input#ViewMore").click(function() {
var data = { before: oldestDate, threadId: 1 };
$.post("/Message/More", data,function(html) {
$('tbody#posts').prepend(html);
return false;
},
"html");
return false;
});
with the html coming back looking something like:
<div id="comment">Message output Quote</div>
This is all working fine and dandy, everything appears as it should, no problems.
The problem occurs when I have an event hooked into the "quote" anchor that has been added through the ajax call. Specifically, a jQuery event on that anchor does not fire. Why?
For instance:
$("#quote).click(function() { ... });
Does nothing. Acts like there is no event on it. I know it is working on other anchors on the page that were not added through a ajax request, so there is not a code error there, plus if I refresh the page it will then fire correctly. Is there some reason that this is happening, do I need someway to reinitialize that event on the anchor tag somehow? Any ideas?
Working with jQuery 1.3.1 (didn't work with 1.2.6 either) so I believe it is my implementation not code itself.
You can use Events/live of jQuery 1.3, live will bind a handler to an event for all current - and future - matched elements.
When the new content is added to the page with Ajax you have to re-register all the events to those new elements.
Changed to
$('#quote').live("click", function() { ... }
and
$("input#ViewMore").live("click", function() { ... }
Doesn't seem to work
CMS's answer helped, but here's how it ended up:
The view more button event remained the same as it was outside of the AJAH request that added it:
$("input#ViewMore").click( function() { ... }
Elements that had events that were being added in and out of the AJAH request needed to use the live method:
$('#quote').live("click", function() { ... }
Works like a charm!