I have form and Add button bottom of te form which is the right..and whenever click it's adding new a form with delete button and if I click it has to delete current form
my js code
$(".iade_sil").on("click",function(){
$(this).parents(".add_after").find(".group").remove();
});
and if you want you can see full demo and js files
codepen demo
You have to register the listener to watch all new elements too. And you want to use closest, not parents.
Even you dont need the closest too, you can select the .group directly, because your delete button is inside that element:
$(document).on("click", ".iade_sil", function() {
$(this).closest(".group").remove();
});
Also you can use closest to that gorup class
$(document).on("click", ".iade_sil", function() {
$(this).closest(".group").remove();
});
You need to use event delegation for attaching events to dynamically added DOM. You should also use .closest() instead of .parents() and traverse to group element:
$(document).on("click",".iade_sil",function(){
$(this).closest(".group").remove();
});
Related
I am trying to make info.event.extendedProps.description field show hide when I click event title in Fullcalendar list view. But it only works partly.
Example here.
I added this under eventDidMount and works for line 1,3,5,7 etc. But not 2,4,6,8 etc
//Initially hide all the item-content
$('.item-content').hide();
// Attach a click event to item-title
$('.item-title').on('click', function() {
//Find the next element having class item-content
$(this).next('.item-content').toggle();
});
Use off(), off() method removes event handlers that were attached with .on(), so its works.
In your case:
$('.item-title').off().on('click', function () {
//Find the next element having class item-content
$(this).next('.item-content').toggle();
});
Note: I tested your code with off() on your codepen and it's work.
In framework7, how to add click event on dynamic elements?
If I add my element first on my view, the click event works fine like below:
<div class="test">Click Me</div>
$$('.test').on('click', function () {
myApp.alert("Gotcha!");
});
But if I have dynamic elements, especially elements dynamically added to virtual-list, I cannot make the click event to work. What is the right way to do this?
I even tried inline function, ex: <div class="test" onclick="myFunction();">Click Me</div>, still this won't work.
You can use:
// Live/delegated event handler
$$(document).on('click', 'a', function (e) {
console.log('link clicked');
});
For your case:
$$(document).on('click', '.test', function(e){
console.log('Some code...');
});
Here is docs. Scroll until events section.
Use this for dinamically added elements:
$$(document).on('click', '.test', function () {
myApp.alert("Gotcha!");
});
All answers are good to go with. But if you are using this class 'test' for other elements of the page, you will end up firing some extra click event(when you click on any other element of same class). So if you wanna prevent that, you should add listener to that particular element.
if you're adding an element of class test to an existing element of id testId, then use
$('#testId').on('click', '.test', function(this){
}
In the function where you dynamically add the new elements you have to assign an event handler for them.
Lets say you have a function something like this
function addNewLines(){
//add the new lines here
// you have to run this again
$$('.test').on('click', function () {
myApp.alert("Gotcha!");
});
}
I'm new here ... so let me know how I can click on the first onclick within this div . Note that if you do $ (".giornoweekcorrente" ) i select the entire interior of the div but my problem is, how do I get to click the function visualizzaEvento ... through the class " giornoweekcorrente " .
Take a look for this image to understand.
Thanks for any help !
Try like this. Hope this helps.
$('.giornoweekcorrente a:first').click();
A possible workaround:
// get the first anchor child of the element and trigger the desired event:
$('.giornoweekcorrente').on('click', function(){
$('a', this).first().trigger('click');
});
var target = $(".giornoweekcorrente").children()[0]
$(target).click(function(){
visualizzaEvento();
});
just find the children of your div, and find the first child.
see : https://api.jquery.com/children/
Your anchor tag has an id why not use that:
$("#lente_click_gio").click();
Markus, you might want to attach "onclick" to the element with id "lente_click_gio" directly. You can do that using the following code:
$(document).ready(function(){
$("#lente_click_gio").on('click',function(){
//Your code here .. Call visualizzaEvento
});
});
But this would just attach the click event and the callback to it. Instead if you want to trigger a click event on the anchor element where you have attached the function, try the following code:
$("#lente_click_gio").click(); /* Generate a click event on the element with the ID lente_click_gio */
This would trigger a click event on that element. Hope this would help.
Hello I have some links in my HTML code. I want to change the href property of each link on hover and then on clicking this link I want to open it up in a new tab. The code is as follows:
$('.identifierClass').hover(function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").off().click(function(e) {
$(element).attr("target", "_blank");
});
}
});
Everything is working properly in Chrome/Firefox, however, on clicking the link in IE 11 it simply hangs and click wont work.
Any help is appreciated.
You need to bind to a static or preexisting element that the dynamic elements will be created inside of:
$(document).on('mouseenter','.identifierClass',function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").attr("target", "_blank");
}
});
Edit: here is a fiddle of it and I also had to use 'mouseenter' instead of 'hover' when using the string name for the event. jquery .hover() documentation
In the fiddle i show you two divs being added dynamically:
$('#place').html('<div class="identifierClass">hover1</div><div class="identifierClass2">hover2</div>');
Above that, I set my event handlers, for hover1 div, I set the event on the document using a specified selector:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi');
});
You can see this works when you hover of 'hover1' text on the right and, conversely, you can see hover2 doesn't work using this binding:
$('.identifierClass2').hover(function(e) {
alert('hi2');
});
here is a link to the jquery documentation on event delegation.
Edit2: I updated the fiddle to address the 'href' manipulation. It appears that you just want to change some attributes on the hover portion:
I modified the 'mouseenter' binding to look like this:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi'); $('#someLink').attr('href','http://www.bing.com').attr('target','_blank');
});
I don't think you need the 'off' or the 'click', but that is based off of some assumptions, so please feel free to comment and I can update accordingly. This, though, will change the href when the mouseenters the dynamic element and change the target attribute as well.
I am trying to handle the click event using jQuery
on upload success, I am creating the following using jQuery:
$("#uploadedImage").append( "<div class='img-wrap'>
<span class='deletePhoto'>×</span>
<img data-id='"+files[i]+"' src='"+asset_url+"uploads/ad_photo/"+files[i]+"'>
</div>
<span class='gap'></span>");
and for handling click event for the above created div's I have written this:
$('.img-wrap .deletePhoto').click(function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
the above code is working properly and creates all div, but when I click on the deletePhoto span. no jQuery alert is showing.
Any help or suggestion would be a great help.
Thanks in advance
delegate the event and change as suggested:
$("#uploadedImage").on('click', '.deletePhoto', function() {
You have to delegate your event to the closest static parent #uploadedImage in your case which is available on the page load like the container which holds the newly appended div and image.
although $(document) and $(document.body) are always available to delegate the event.
It is better to use on() when you create new element after DOM has been loaded.
$(document).on('click', '.img-wrap .deletePhoto', function() {
});
You are creating your element dynamically that is why you would need .live()
but this method is deprecated in newer version.
if you want to use jquery 1.10 or above you need to call your actions in this way:
$(document).on('click','element',function(){
`your code goes in here`
})
try this:
$(".img-wrap .deletePhoto").on('click', function() {
});
You can change a little in your code.
$(".deletePhoto").off("click").on("click",function(){
//Your Code here
});
First check in debugging mode that you get length when your code is going to bind click event and another thing bind event must written after that element is appended.
And Also check css of your element (height and width) on which you are clicking and yes
$(document).on('click','Your Element',function(){
//your code goes in here
});
Will works fine
use delegate:
$('#uploadedImage').on('click','.img-wrap .deletePhoto',function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
see details delegate and .on here