We are using the Magnific library to display the PopUps in our site. Everything with this is going well except one thing.
when we add an element dynamically, popup is not working for the dynamically added elements. Can you please help me how I can bind the click event for the dynamically added element to display the popup? Here is my code is given below:
`<a id="del-vis-archive-new-{{$request->id}}" href="#delete-visitor-archive" data-id="{{$request->id}}" class="popup-form-delete-visitor-archive" style="color:red;"><i style="color:red; text-align: right;" class="hi hi-trash"></i></a>
var PopupDelVisArchive = function() {
$('.popup-form-delete-visitor-archive').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
callbacks: {
open: function() {
var dataId = $(this.st.el).attr('data-id');
$("#btn").attr('data-id', dataId);
}
}
});
}
$(document).on( 'init.dt, draw.dt', function ( e, settings ) {
PopupDelVisArchiv();
});`
The class is responsible for displaying the pop-up
but it doesn't work for the dynamically added elements.
In other words, the click event is not getting registered in the DOM for the newly added elements.
You need to bind the popup to each new element after they are loaded in the dom. That means calling PopupDelVisArchiv(); for each new element once dom ready.
Related
How do you properly attach events to elements in a popup?
This is how I currently do it:
HTML
<div id="userDetail">
<input id="checkbox" type="checkbox" />
<div id="button-confirm"></div>
</div>
JavaScript
var userDetail = $("#userDetail").dxPopup({
width: '550',
height: 'auto',
showTitle: true,
title: "Setup Import Template",
visible: false,
onShown: function () {
$('#checkbox').one('click', function () {
$('.template-view').toggle();
});
$("#button-confirm").dxButton({
onClick: function (e) {
e.jQueryEvent.preventDefault();
templateDataPopup.hide();
}
});
}
}).dxPopup('instance');
The problem with this is that:
Every time the popup is shown, the jQuery attaches new click event to #checkbox element, event after I use .one().
#button-confirm element's click event is NOT being attached twice. This is the behavior I want (although it's not what I expected, I think because it's a DevExpress instance).
I have tried attached events to elements in the popup before I initialized the popup, but for some reason, after the popup is shown, none of the elements' events work.
So, how do you properly attach events to elements in a popup?
Thanks!
I got answer from DevExpress support and the suggestion is to use contentTemplate. The reply:
Use the contentTemplate property to create popup content and add the
required events to it:
contentTemplate: function (contentElement) {
contentElement.append('<input id="checkbox" type="checkbox" />');
var hideButton = $("<div id='button-confirm'>").dxButton({
text: "Hide popup",
onClick: function (e) {
popupInstance.hide();
}
});
contentElement.append(hideButton);
}
So, instead of attaching the event through onShown event, it's recommended to attach in contentTemplate.
You can also load popup content from HTML tag in contentTemplate
I am using the tooltipster jquery plugin to show title in a nicer way. In my site there is a link with two classes .fav tooltip
<div class="actsave">
Save
</div>
The .tooltip is use to take the above anchor title and display it according to the tooltipster plugin.
$('.tooltip').tooltipster();
This works just fine, but when a user will click on this link the entire DOM will be replace with a new DOM.
$("div.actsave").on("click", "a.fav", function(e){
e.preventDefault();
$(this).replaceWith('Delete');
});
At this point no events are occurring with the new anchor with .del class.
My question is how i can add a event listener to this newly created dom in jquery?
After doing some research i fix it this way:
$("div.actsave").on("mouseover mouseout", "a.del", function(e){
$(e.target).tooltipster();
});
but it seems that we are adding same event again and again without any reason to the dom when we hover the link, so here is the question can we add an event listener to this newly created dom just for once?
$("div.actsave").on("click", "a.fav", function(e){
e.preventDefault();
var newElement = $('Delete');
$(this).replaceWith(newElement);
newElement.tooltipster();
});
Create a flag to keep track using data()
$("div.actsave").on("mouseover mouseout", "a.del", function (e) {
if (!$(this).data('triggered')) {
$(e.target).tooltipster();
$(e.target).data('triggered', true);
}
});
I am working with jQuery dialog. I have one problem that trying to solve that is:
I have created the dialog on click of of anchor class and its working. Than after this I have created one more anchor tag with same class and on click of that new created tag dialog is not working.
Here is html:
<div id="loader_ajax"></div>
<a id="show_hide_window1" class="show_hide_window" href=""> Dialog </a>
<div class="next_tg"></div>
Here is jQuery code:
$(function(){
$(".show_hide_window").click(function(){
showDialog();
});
$('.next_tg').html('<a class="show_hide_window" href=""> Dialog Created By Jquery </a>');
});
function showDialog()
{
$("#loader_ajax").dialog({ modal: true, height: 400,width:650,title: title });
return false;
}
I have already tried with delegation(Event binding) its not working. For Dynamically created anchor it give error in console: TypeError: $(...).dialog is not a function
Please help!! Thanks
You can currently binding click event to elements that are present in the DOM when binding code executes. You need event delegation for dynamically created elements. You also need to add the newly create element to DOM, suppose you want to add to loader_ajax
Here static parent could be any html element, in your case it would be loader_ajax
You code would be
$("#loader_ajax").on("click",".show_hide_window", function(){
showDialog();
});
var newTextBoxDiv = $(document.createElement('div'));
newTextBoxDiv.html('<a class="show_hide_window" href=""> Dialog Created By Jquery </a>');
$("#loader_ajax").append(newTextBoxDiv);
Delegated events
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers.
Use on Event. This will manage dynamically added elements.
$(function(){
$('body').on('click', '.show_hide_window', function() {
showDialog();
})
$('.next_tg').html('<a class="show_hide_window" href=""> Dialog Created By Jquery </a>');
});
Fiddle : http://jsfiddle.net/fqt0yztb/
Reference : In jQuery, how to attach events to dynamic html elements?
I have make it from my own code. Now dialog successfully working for dynamically created element.
fiddle
$(document).on('click', '.show_hide_window', function (evt) {
var dialog = $('<div></div>').append('<img src="../images/themeroller.gif"/>');
var getContentUrl = $(this).attr('href');
dialog.load(getContentUrl + ' #content').dialog({
title: $(this).attr('title'),
modal: true,
height: 400,
width:650
});
dialog.dialog('open');
return false;
});
I am using Yii CGridView with ajax Pagination and one of the column is Link for image or inline ajax content and i want to use FancyBox to the column.
When i use pagination i lose the binding on the new element.
if i try to make it on element click i always get error if the element has fancy-box already like below
$('a.fancy-img').live('click', function () {
$(this).fancybox({});
return false;
});
But I always get javascript error if i click twice on the same link.
The problem you are trying to initialize fancybox for the element twice so your javascript breaks and doesn't work.
You can add class or some attribute to the element that has already has Fancybox init so you don't initialized it again for the same element and your javascript beaks as below :
$('a.fancy-img').live('click', function () {
var El = $(this);
$(this).fancybox({});
if (!El.hasClass('fancy-box-init')) {
El.addClass('fancy-box-init');
El.trigger('click');
}
return false;
});
Try
fancybox uses $(element).data() to store its element related configuration.
So check if(!$(this).data().fancybox) --> if there is no data that means no fancybox is registered to it than register fancybox
$('a.fancy-img').live('click', function () {
if(!$(this).data().fancybox){ //or if(!$(this).data("fancybox"))
$(this).fancybox({});
}
return false;
});
.live() is deperciated use .on()
Syntax
$( elements ).on( events, selector, data, handler );
I'm using the jqModal plugin to attach a dialog box to a button click. I'm trying to attach the following box to the page:
suqBoxInner = document.createElement("div");
suqBoxInner.id = "suq_box_inner";
$(suqBoxInner).jqDrag('.jqDrag').jqResize('.jqResize').jqm({
trigger: '#suq_button',
overlay: 0,
onShow: function(h) {
return h.w.css('opacity', 0.92).slideDown();
},
onHide: function(h) {
return h.w.slideUp("slow", function() {
if (h.o) {
return h.o.remove();
}
});
}
});
However this only works if I run this binding code after the div's been inserted into the page. That is I have to use something like $("#div_on_page").after(suqBoxInner) before running the jqDrag code. What are my options for binding it before it's inserted into the page? I could use $.live() but that has to bind to a mouse event and the jqModal plug in uses bind on the trigger listed inside the function call.
It appears that this plugin requires the div (suqBoxInner) to be on the page. So short of modifying the plugin, I'm not sure you have many options as-is. Perhaps you may want to rethink how you are implementing the plugin? How is suqBoxInner being placed on the page? Is it after a specific event, or action?
One solution I can think of off the top of my head is to fire an event after suqBoxInner is placed on the page. The event would then initialize jqModal.
Just a thought. Good luck.