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>
Related
I want to use jquery to always hide an element when it is checked, and show the element when it is unchecked. After doing some research I found the "is" attribute and so I created a simple html file as:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p id="test">This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<input type="checkbox" id="s">Click me</input>
</body>
</html>
Now for some reason, the jquery is not functional. Any help would be appreciated please. I also tried:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
And this doesn't work either.
This is simple in javascript. Please try the following:
var cb = document.getElementById('isAgeSelected');
var txtAge = document.getElementById('txtAge');
$(document).ready(function(){
cb.change= function(){
if(cb.checked) {
txtAge.style.display ='block';
} else {
txtAge.style.display ='none';
}
};
});
In JQuery, you can do the following:
$(document).ready(function(){
$('#s').on('change', function(){
if($(this).is(":checked")){
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});
});
You are only checking the checkbox once after the DOM is ready instead you should do it on its change event
$("#s").change(function(){
if($(this).is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
You can do this using following jQuery onchange event and .checked function
$(document).ready(function(){
$('#s').change(function(){
if(this.checked)
$("#test").hide(); // checked
else
$("#test").show();
});
});
Working URL:: https://jsfiddle.net/qn0ne1uz/
Good question !
now you were almost there.
$(document).ready(function(){ // <= !! you only evaluete the chackbox once (on document ready)
if($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
What you want to do is monitor checkbox the whole time, like so:
$('#s').bind('change', function() {
if ($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
example on jsfiddle
I'm guessing you are wanting to use the jQuery when the checkbox changes - at the moment you are just changing the hide / show it when the document loads.
Also ids need to be unique or jQuery will only get the first item with that id it comes to when you use the id selector. Change the test id to a class.
If you want the click me to change the state of the checkbox, turn it into a label (think you had it as a button) and target the input (using either for="input-id or wrap the label around the input and the text)
Try the following:
// this is to go in your document ready
$('#s').on('change', function() { // bind to the change event of the chackbox
// inside any change event, this is the js object of the thing that changed (ie the checkbox)
if (this.checked) {
$('.test').hide();
} else {
$('.test').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a heading</h2>
<!-- ids need to be unique so change this to a class or your jquery won't work -->
<p class="test">This is a paragraph.</p>
<p class="test">This is another paragraph.</p>
<input type="checkbox" id="s"><label for="s">Click me</label>
Very simple code, for some reason nothing I try will work! I have obviously imported Jquery, jqueryUI, ajax, all the things I need imported (more than once!). But for some reason this button does not want to be clicked using Jquery! I got it to work with onClick, but I would like to be using jquery for this. SOS!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
function pie(){
//alert();
}
</script>
<body>
loading...
<input type="button" id="heyo" onclick="pie()" value="ff" />
</body>
Wrap you jquery code with $(document).ready(function() {}) to make sure all the DOM objects have been loaded before accessing them with jQuery:
$(document).ready(function() {
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
});
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");
});
});
This is my js code:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
if($("#a").attr("checked")){
$("#a").attr("checked",false);
}else{
$("#a").attr("checked",true);
}
})
})
</script>
This is my html code :
<input type="checkbox" id="a">
<button>123</button>
I click the button on the browser, The checkbox only can switch status on first and second time.
But I do not think the issue of attr(), I have some code before can run Correctly.
$("#delete").click(function(){
if($("input[name='del_id[]']").attr("checked")){
$("input[name='del_id[]']").attr("checked",false);
}else{
$("input[name='del_id[]']").attr("checked",true);
}
});
Is there someone can help me ?
Use prop() instead of attr() like,
$("button").click(function () {
$("#a").prop("checked", !$('#a').prop('checked'));
});
Demo
Your code is correct if you use jQuery Version 1.8.3
$(document).ready(function(){
$("button").click(function(){
if($("#a").attr("checked")){
$("#a").attr("checked",false);
}else{
$("#a").attr("checked",true);
}
})
})
Fiddle
http://jsfiddle.net/YXkgm/1/
If you use above 1.8 use prop
$(document).ready(function(){
$("button").click(function(){
if($("#a").prop("checked")){
$("#a").prop("checked",false);
}else{
$("#a").prop("checked",true);
}
})
})
Fiddle
http://jsfiddle.net/YXkgm/
I have html like this:
<html>
<input type='button' name='button1' id='button1'>
<input type='button' name='button2' id='button2'>
</html>
What I want to do that when User click button2, it should remove button1 element and show a message on its place. It will look like this after button2 click event.
<html>
Button1 Removed
<input type='button' name='button2' id='button2'>
</html>
If you use jquery, you can do that:
$('#button2').click(function() {
$('#button1').replaceWith('Button1 Removed')
});
$(document).ready(function(){
$("#button1").click(function(){
$("#button1").replaceWith("<div>Hi der</div>");
});
});
If you were using jquery then this solution:
$('#button2').click(function(){
$('#button1').replaceWith('<p>Button1 Removed</p>');
});
$('#button1').click(function() {
$('this').remove().html('<p>Button 1 Removed</>')
alert('button1 removed');
});
$(document).ready(function(){
$("#button2").click(function(){
$("#button1").replaceWith("Button1 Removed");
});
});
Using jQuery with an embedded function that can also do other things.
$('#button2').click(function() { $('#button1').remove().html('<p>Button 1 Removed</>') });
Remember its good practice to always enclose text in some tags like etc