Jquery timepicker set button click function not working.
I tried to add a class to <div id="ptTimeSelectSetButton">
using $('#ptTimeSelectSetButton a').addClass('timePickClass');
<div id="ptTimeSelectSetButton"> it's a div inside timepicker
I tried to add click functions on using div id and '' tag inside the div.
unfortunately the click function not working. if anybody know the reason please share here.
HERE DEMO
html page
Start Time <input id="sample1" type="text"></input>
End Time <input id="sample2" type="text"></input>
Script
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
});
// click on div
$('#ptTimeSelectSetButton').click(function(e) {
alert('Working with div id');
});
//or click on <a href> tag
$(".timePickClass").click(function(e) {
alert('working with a tag class');
});
You have to put the click events inside the $(document).ready or use event delegation as others said:
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
//or click on <a href> tag
$(".timePickClass").click(function(e) {
alert('working with a tag class');
});
// click on div
$('#ptTimeSelectSetButton').on('click', function(e) {
alert('Working with div id');
});
});
The div is create dynamically when the popup is shown so you need to use event delegation
$(document).on('click', '#ptTimeSelectSetButton a', function (e) {
alert('Working with div id');
});
Demo: Fiddle
Use event delegation for dynamically created DOM elements
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
});
// click on div
$(document).on('click', '#ptTimeSelectSetButton', function(e) {
alert('Working with div id');
});
//or click on <a href> tag
$(document).on('click', ".timePickClass" ,function(e) {
alert('working with a tag class');
});
Fiddle
Related
I've looked through stackoverflow for days, and none of the stuff I worked. Anyways, after an explosion and appending a submit button to my document the button doesn't alert when clicked.
$(document).ready(function() {
alert('hi');
$("#a").click(function() {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='picture.png'> <form > <input type='text'></form><button id='submit'>submit</button>");
});
$("#submit").click(function() {
alert('hi');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='a'>button</button>
Any suggestions?
You are binding click to submit before submit is even added to htmlDOM. To do it that way you have to first add submit to htmlDOM and then bind the event handler.
But, for such dynamic elements you can use jQuery on function and delegate from any parent element. It is not recommended to delegate from body, you can delegate from nearest parent that is present during document.ready event.
$(document).ready(function() {
alert('hi');
$("#a").click(function() {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='picture.png'> <form > <input type='text'></form><button id='submit'>submit</button>");
});
$("body").on('click','#submit',function() {
alert('hi');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='a'>button</button>
I'm not 100% if I understood what you're trying to do there but check if this works:
<script>
$(document).ready(function () {
alert('hi')
$("#a").click(function () {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='img.png'> <form > <input type='text'><button id='submit'>submit</button></form>");
});
$("#submit").click(function () {
alert('hi');
});
});
</script>
I assume you are inserting the button after page load, but calling the click handler before the element is on the page. Therefore jQuery can't find your element.
If you want to assign your click handler on page load, that's fine. Just assign your click handler to any parent element that is on the page when the page loads, like <body> and then using the jQuery .on() method to specify a descendant selector like so :
$('body').on('click', '#submit', function(){ alert('hi'); });
Jsfiddle at demo.
I have a contenteditable div. I want the html of whatever I write in that div, on the click of anchor tag.
Right now, div is working but nothing is showing on click of the anchor tag.
function getcode()
{
var content = $('#my-contenteditable-div').html();
alert (content);
}
You can do this as well:
$("a").click(function () {
alert($('#my-contenteditable-div').html());
});
Here is the JSFiddle
Then you don't need to write separate functions and attach it to the onclick event attribute of the a tag
Try This
// get the link
var link = document.getElementById("linkId");
// add click listener to it
link.addEventListener("click",getcode,false);
// you handler
function getcode()
{
var content = document.getElementById("my-contenteditable-div");
alert (content.innerHTML);
}
Just you can go with jquery
Working Fiddle
$(document).ready(function() {
$('#gethtml').on('click', function(e) {
var content = $('#my-contenteditable-div').html();
alert (content);
});
});
can use this use id in a and a div to show data
<div contenteditable="true" id="my-contenteditable-div">
sdfsdfds
</div>
<a href="#" id="getcode" >Get HTML</a>
<div id="show"></div>
and jQuery
$( "#getcode" ).click(function() {
var contents = $('#my-contenteditable-div').html();
$("#show").text(contents);
});
I've got the following list of semibuttons loaded using javascript:
var html ='<ul class="nav well-tabs well-tabs-inverse mb10" id="users">';
html +='<li class="active"><a id="'+this.my.user+'" data-toggle="tab_'+self.my.id+'" class="pestaña">'+this.my.user+'</a></li>';
var users = this.my.community_users;
for (i=0;i<users.length;i++) {
if (users[i].user != this.my.user)
html +='<li><a id="'+users[i].user+'" data-toggle="tab_'+self.my.id+'" class="pestana">'+users[i].user+'</a></li>';
};
html +='</ul>';
$(html).appendTo("#Dashboard");
Note, that the first item in the list is active. I am getting something like this:
Ok, now i code he onclick event to do something when a button is clicked:
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function(e){
// whatever here
});
What I need now is to set active the tab being clicked and set inactive the tab that was active. How can I access both elements to addclass and removeclass active?
You could use following logic:
$(document).on('click', '#users li:not(.active)', function () {
$('#users').find('li.active').add(this).toggleClass('active');
});
Something like this might work. Basically remove the .active class from everything but the element you clicked on. The add the .active class to the element clicked on.
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
$('a[data-toggle=tab_'+self.my.id+']').not(this).removeClass('active');
$(this).addClass('active');
});
I would remove the 'active' class from all the list items first, then add it back to just the only that was clicked.
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
$('#users .active').removeClass('active');
$(this).addClass('active');
});
I have:
$(document).ready(function() {
$("#btn1").click(function() {
$("#po").append("<p><%= j f.datetime_select :dtmRealshow%><a>Remove</a></p>");
});
});
<p id="po"></p>
<button id="btn1">+</button>
When i click on the btn1 a new datetime_select field is added to the form.But i want to remove the parent <p> tag after clicking on the remove link.Please help me out.
Add a css class to anchor
$("#po").append("<p><%= j f.datetime_select :dtmRealshow%><a class='remove'>Remove</a></p>"); });
Then you can use Event Delegation using .on() delegated-events approach to bind click handler to anchor.
$("#po").on('click', ".remove", function(){
$(this).closest('p').remove();
});
Removing the parent <p> will remove it's children along with it.
If that's what you're looking for then try the following code.
$(document).ready(function(){
$("#btn1").click(function(){
$("#po").append("<p><a id='remove'>Remove</a></p>");
$("#remove").click(function() {
$(this).closest('p').remove();
});
});
});
Here is the demo
I am sorry that I have asked two questions in a few minutes.
In a html file, I got three child DIV tags in a parent DIV tag:
<div id="container">
<div id="frag-123">123</div>
<div id="frag-124">124</div>
<div id="frag-125">125</div>
</div>
Now when I click either the three child DIV tags, I will see two alert boxes pop up instead of one:
The first alert box will show something like this:
frag-123, and the second alert box will show something like this:
container
I dont know why.
I just want to get the ID value of a child DIV, not the one from the parent DIV.
<script>
$(function() {
$("div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>
Please help.
This is a case of event bubbling. You can stop event bubbling by giving
e.stopPropagation()
inside the click event handler.
Try
$(function() {
$("div").click(function(e) {
var imgID = this.id;
alert(imgID);
e.stopPropagation() // will prevent event bubbling
});
});
If you want to bind click event to only child elemets inside the container div then you can give like this
$("#container div").click(function(){
var imgID = this.id;
alert(imgID);
});
That's because you're binding the event handler to all DIVs. Instead, what you want is bind it only to DIVs within container:
<script type="text/javascript">
$(function() {
$("#container div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>