I am changing the innerHTML of a div and then with a newly created HTML i am calling a function, but for some reason, that function is not being called. Below is my work. Here is the Fiddle
$('#click1').click(function () {
$('#submit').html('this is new html <br />Click here 2nd')
});
$('#click2').click(function(){
alert("all is well");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="submit">
Click here
</div>
Since you generated click2 dynamically so you should delegate. Try this
$('#submit').on('click', '#click2',function(){
alert("all is well");
});
The reason your code doesn't work is you are assigning an event handler to an object that doesn't yet exist. Simply move the click2 event handler into the click event handler like so.
$('#click1').click(function () {
$('#submit').html('this is new html <br />Click here 2nd')
$('#click2').click(function(){
alert("all is well");
});
});
Here is jsfiddle
$(document).on('click','#click2',function(){
alert("all is well");
});
html
<div id="submit">
Click here
</div>
js
$('#button1').on('click', function(){
$(this).replaceWith('HTML HERE');
});
http://jsfiddle.net/z725dpLa/6/
You can't attach EventHandlers to DOM-Elements which are not created. Therefore you need to attach your click2-Handler after inserting your new Link into the DOM!
$('#click1').click(function () {
$('#submit').html('this is new html <br />Click here 2nd');
$('#click2').click(function(){
alert("all is well");
});
});
Related
I want to display the alert() after a new row is appended.
This is my code, but delegation is not working.
$(".tweet").each(function() {
alert("tweet alert");
});
$("button").click( function(){
$("#container").append("<div class='tweet'>tweet</div>");
});
$(document).delegate('click', function(){
$(this).addClass("tweet");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
Im using a basic jquery version 1.4
In my code, the alert doesnt display at all! what am doing wrong? thank you.
You can add the alert inside the click handler like so:
$("button").click(function() {
$("#container").append("<div class='tweet'>tweet</div>");
alert("tweet alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
I am having some trouble with $.change in jQuery.
HTML
<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>
JS
$('.btn').on('click', function() {
$('.change').text('Click Me');
$('.onchange').text('');
});
$('.change').on('click', function() {
$('.change').text('Nearly There');
});
$('.change').on('change', function() {
$('.onchange').text("Nice One");
});
Here is the link to Codepen
Basically what should happen is when "Click Me" is clicked the text will change to "Nearly There" then straight after "Nice One" should appear below.
However this isn't happening, I've tried both
$('.change').on('change', function() {});
$('.change').change(function() {});
And neither work.
Note
The code I have supplied is my test code, and is all relevant to what I'm trying to achieve.
Update
I wasn't aware the .change only worked for form controls, which would explain why it wasn't working.
Solution
CreMedian - Suggested the solution that I was looking for.
$('.change').on('DOMSubtreeModified', function() { });
I have updated the CodePen for future reference.
As indicated in the comments, the .change() event does not work with div elements.
One way you could get the same effect is with the following code:
$('.change').bind("DOMSubtreeModified",function(){
//action you want when the '.change' object changes
});
Javascript MutationEvent is not widely supported, so be careful if implementing this in production code.
Reference Link: http://help.dottoro.com/ljrmcldi.php
$('.change').on('change', function() {
in your example, .change is a div, and divs dont raise change events when clicked.
You probably wanted to just update both elements from the click event
$('.btn').on('click', function() {
$('.change').text('Click Me');
$('.onchange').text('');
});
$('.change').on('click', function() {
$('.change').text('Nearly There');
$('.onchange').text("Nice One");
});
Try with DOMSubtreeModified event.
$('.btn').on('click', function() {
$('.change').text('Click Me');
$('.onchange').text('');
});
$('.change').on('click', function() {
$('.change').text('Nearly There');
});
$('.change').on('DOMSubtreeModified', function() {
$('.onchange').text("Nice One");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>
Note: It will not supported by IE8 and older.
Demo in CodePen
The browser only fires change events for textbox, check/radio box and select list - all form elements. When something changes within your <div> or <p>, the browser does nothing to notify your javascript. Therefore, the listener .on('change' is not going to ever fire.
Here is a short lists of for elements that raise the event:
TextBox When Enter key is pressed
Radio/Check Box When the state is changed
Select List When the selected item is changed
Here is more on the event: Mozilla MDN onchange
do it like this
$('.change').text('Nearly There').trigger('change');
example
$('.btn').on('click', function() {
$('.change').text('Click Me');
$('.onchange').text('');
});
$('.change').on('click', function() {
$('.change').text('Nearly There').trigger('change');
});
$('.change').on('change', function() {
$('.onchange').text("Nice One");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>
I have two elements as following on my page:
<input type="text" id="textfield"/>
<input type="button" id="button" value="CLICK"/>
And in my Javascript code I have the following:
$(document).ready(function() {
$("#button,#textfield").on("click change",function() {
// This won't work because I don't need click function
// to be worked on the text field
});
});
What I need is click function to be worked on button and need only change function to be worked on text field. How do I do this?
If you want the same code to be called for different events on different objects, you can put the event handling code into a common function and then specify the exact conditions in each event registration:
$(document).ready(function(){
function myEventHandler(e) {
// your code here
}
$("#button").on("click", myEventHandler);
$("#textfield").on("change", myEventHandler);
});
Split your code into:
$(document).ready(function(){
$("#button").on("click",function(){
});
$("#textfield").on("change",function(){
});
});
Why did you put them together?
Seperate to two function:
$("#button").on("click change",function(){
// Handle button
});
$("#textfield").on("change",function(){
// Handle Textfield
});
Assign them separately:
$('#button').click(function(){
//button code here
});
$('#textfield').change(function(){
// text field code here
});
If you want them to do the same thing, create a separate function:
function doSomething() {
// text field and button code here
}
and then reference that function instead:
.click(doSomething);
...
.change(doSomething);
Also, i should tell you, "change" does not do what you would think for a text field. It does not fire while typing, only when you "blur" the text field after updating it. It's more for checkboxes and things of that nature. I would use .keyup()
Try:
$(document).ready(function(){
$("#textfield").on("change",function(e){
my_function(e);
});
$("#button").on("click",function(e){
my_function(e);
});
function my_function(e){
// e = event...
// your actions...
}
});
Try using like this if you want only one .on function
$("#button,#textfield").on("click change",function(){
if ($(this).attr('type') == "text"){
alert("Do your change function");
}
else if ($(this).attr('type') == "button"){
alert("Do your click function");
}
});
See Demo
Ok, if i have jQuery like this:
$(document).ready(function(){
$('#btn1').click(function(){
//Add stuff to table
$('#items_table tr:last').after('<tr><td><input type="button" id="btn2" value="second button" /></td>/tr>');
});
//Created button above is triggered
$('#btn2').click(function(){
alert('btn 2 was clicked');
});
});
Nothing will happen when i click on the "btn2". I guess that's becaouse it's not there when $(document).ready() ? If i send that js for btn2 into the table row, it works fine. something like this:
$(document).ready(function(){
$('#btn1').click(function(){
//Add stuff to table
$('#items_table tr:last').after('<tr><td><input type="button" id="btn2" value="second button" /><script type="text/javascript ..... BLAH $(\'#btn\').click BLAH </script>;
});
});
Ideas?
Use on to let the table delegate the event to elements that may appear later :
$('#items_table').on('click', '#btn2', function(){
alert('btn 2 was clicked');
});
Attach an event handler to a parent element using .on(), and pass the selector as an argument. This works for dynamically added elements as well...
$('#items_table').on('click', '#btn2', function(){
alert('btn 2 was clicked');
});
I've got code so that when you click on a word, it is replaced by another word.
<script>
$(document).ready(function() {
$('.note_text').click(function(){
$(this).remove();
$('#note_div').append('<span class="note_text">new</span>');
// re-applying behaviour code here
});
});
</script>
<div id="note_div">
<span class="note_text">preparing</span>
</div>
I need the appended word to have the same click behaviour. What is the best way to do this?
change
$('.note_text').click(function(){
to
$('.note_text').live('click',function(){
This will cause anything on your page that ever gets the class 'note_text' to have the behaviour set by .live
You should use a .live()help or .delegate()help binding for that purpose.
$(function() {
$('#note_div').delegate('.note_text', 'click', function(e) {
$(e.target).parent().append("<span class='note_text'>new</span>").end().remove();
});
});
Demo: http://www.jsfiddle.net/PkngP/2/
You could rebind the handler:
function handler(){
$(this).remove();
$('#note_div').append("<span class="note_text">new</span>");
$(".note_text").unbind("click");
$('.note_text').click(handler);
}
$(document).ready(function() {
$('.note_text').click(handler);
});