I am using lightcase2.1.0 plugin, i appending some anchor tags into ul and calling lightcase function as given below
$('.master_playlist').append("a href='https://www.youtube.com/embed/jt0QvqKVd_o' id='songbtn' data-rel='lightcase:myCollection'>");
(Note: not able to write complete anchor tag here but all attributes are there)
$(document).on('click','a[data-rel^=lightcase]', function(e) {
$('a[data-rel^=lightcase]').lightcase();
e.preventDefault();
});
The problem is after loading the page when i click first time on any anchor tag it doesn't happen anything but when i click second time on any anchor tag it works.
Anybody can help me to understand why it is happening and what is solution of it.
had the same issue. Got around this by manually triggering lightcase:
$('body').on('click', 'a[data-rel^=lightcase]', function(e) {
var href = $(this).attr('href');
lightcase.start({
href: href
});
e.preventDefault();
});
Related
I have a requirement where i need to display side by side a source code editor and a wysiwyg editor such as tinymce . The idea is that the user should click on any element inside the wysiwg editor and the corresponding element should highlight in the source code editor.
So far i have been able to get the selected node in tinymce by using the onnodechange event
setup: function(ed) {
ed.on('NodeChange', function(e){
console.log(e.element);
});
}
but, the event doesn't fire when the editor is in readonly mode. Do you know why this is happening or can you suggest me a way to overcome this issue ?
I have found a workaround by adding the following inside setup callback
//prevent user to edit content inside tinymce
ed.on('PostRender', function(e){
ed.getBody().setAttribute('contenteditable', false);
});
ed.on('KeyPress', function(e){
e.preventDefault();
e.stopPropagation();
});
It's not perfect, but at least, it does the trick ;)
I had a similar problem, but we needed to intercept the click event, not "NodeChange".
I resolved by adding the event handler directly on the body element of the tinymce iframe and using the event target.
bodyEl.addEventListener('click', function(e) {
console.log('Hello ', e.target);
}, false)
If you need to detect selection change, you could use the 'select' event.
I have a dropdown menu which contains a input and several buttons. The dropdown should hide when I click one of the buttons or somewhere else, but don't hide when keypress on the input. I use the following code, it doesn't work. Though it works when I use
$('.dropdown input').click(function(e){
})
instead of live.
But I do need live, so is there any solution for this?
/* dropdown menu */
$('.dropdown input').live('click', function(e) {
e.stopPropagation();
});
$(document).click(function(e){
if(e.isPropagationStopped()) return; //important, check for it!
});
e.stopPropagation() will do no good for you in .live(), because the handler is bound to the document, so by the time the handler is invoked, the event has already bubbled.
You should stopPropagation from a more local ancestor of the element being clicked.
Since you were using .live(), I assume there are some dynamic elements being created. If so, the proper element to bind to will depend on the rest of your code.
Side note, but you never "need" .live(). There are other ways to handle dynamically created elements.
did you try:
$('.dropdown').on('click', 'input', function(e) {
e.stopPropagation();
});
OR
$('.dropdown').delegate('input', 'click', function(e) {
e.stopPropagation();
});
NOTE: e.stopPropagation(); is not effective for live event
According to you question I have a dropdown menu which contains a input and several buttons. The dropdown should hide... means that dropdown is already exists within you DOM. If it already exists then you don't need live event.
what version of jQuery are you using? > 1.7 then:
$(document).on({"click":function(e){
//do your work, only input clicks will fire this
}},".dropdown input",null);
notes:
properly paying attention to event.target should help out with overlapping 'click' definitions using .on();
I'm using fancybox with ajax request to open multilpe fancybox instances on same page:
This is html code:
User
and this is Javascript i've used:
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button_fancy").click(function(){
var element = $(this);
var Ide = element.attr("id");
$("#"+Ide).fancybox();
return false;});});
</script>
Everything could be ok, just 1 problem... first time i load the page, i need to click 2 times over "User" to open fancybox...
If i open fancybox and then i close it, the second time i can click just 1 time...
why?
Thanks
The first click registers the event to the DOM, and the second (and subsequent ones) show the Fancybox.
If using multiple Fancyboxes, you should avoid using ID's like you have there and change it to classes. Not sure why you've got all that code to launch the fancybox, when this should work:
$(".comment_button_fancy").fancybox();
This will Fancybox all elements with the class "comment_button_fancy" and should fix your two-clicks issue. You don't need to put a 'click' event handler around the Fancybox code, as it inherently has that event attached to it.
I am trying to use the sharethis button on a page which is loaded via ajax.
The buttons do not show up. Please help.
Regards,
Pankaj
After adding the new content to the dom, call
stButtons.locateElements();
// or if you want to be a bit defensive about whether the lib has been
// loaded or not:
if (window.stButtons){stButtons.locateElements();} // Parse ShareThis markup
Article another another
Updated 09/2017 Answer
The stButtons object doesn't exist anymore, now you can use
window.__sharethis__.initialize()
To reinitialize the buttons
Updated 03/2020 Answer
As found in The Ape's answer above: https://stackoverflow.com/a/45958039/1172189
window.__sharethis__.initialize()
This still works, however there is a catch if your URL changes on the AJAX request, you need to make sure the URL you want shared is set as a data attribute (data-url) on the inline sharing div. You can also update the title using data-title attribute.
<div class="sharethis-inline-share-buttons" data-url="http://sharethis.com" data-title="Sharing is great!"></div>
Use case:
I'm using a WordPress/PHP function to generate specific content based on a query string. If you don't set the data-url attribute on the ShareThis div, ShareThis will hold the first URL that was clicked to share, regardless of the URL update on AJAX request.
This solution will also work for NodeJS based frameworks, like Meteor.
stButtons.locateElements();
is needed in the rendered callback of a template, to ensure that the shareThis buttons will appear on a page redirect.
I was facing the same problem with sharethis and Ajax pagination.
The buttons was not showing after posts loaded by Ajax so I've searched and found this.
I've just added the function stButtons.locateElements(); on Ajax success:
something like success: stButtons.locateElements();
Hope this will be helpful for someone like me.
Thanks
Ibnul
For the new API following solution worked for me
if (__sharethis__ && __sharethis__.config) {
__sharethis__.init(__sharethis__.config);
}
Add this code after loading ajax content.
do this:
window.__sharethis__.load('inline-share-buttons', config);
and config your buttons with javascript.
The following should work with current ShareThis javascript. If sharethis js isn't loaded, the script loads it. If it is already loaded, ShareThis is re-initialized using the current URL so that it works on pages loaded via Ajax. Working fine for me when used with mounted method on Vue component.
const st = window.__sharethis__
if (!st) {
const script = document.createElement('script')
script.src =
'https://platform-api.sharethis.com/js/sharethis.js#property=<your_property_id>&product=sop'
document.body.appendChild(script)
} else if (typeof st.initialize === 'function') {
st.href = window.location.href
st.initialize()
}
Make sure you use your property id provided by ShareThis in the script src url.
In Drupal you can achieve this by adding following code:
(function($){
Drupal.behaviors.osShareThis = {
attach: function(context, settings) {
stLight.options({
publisher: settings.publisherId
});
// In case we're being attached after new content was placed via Ajax,
// force ShareThis to create the new buttons.
stButtons.locateElements();
}
};
});
I found the following solution on one of the addThis forums and it worked great for me.
I called the function as a callback to my ajax call. Hoep this helps
<script type="text/javascript">
function ReinitializeAddThis(){
if (window.addthis){
window.addthis.ost = 0;
window.addthis.ready();
}
}
...
$('#camps-slide .results').load(loc+suffix, function() {ReinitializeAddThis();});
</script>
How would I change the html of a tag like so:
$('#someId').html('<p>foo bar</p>');
while using the live() or delegate() function? Just for clarification I don't want this to happen on hover or focus or click... I just want jquery to immediately change the html inside of a certain tag.
Basically, I'm trying to change the logo in the Mojomotor's little dropdown panel and I don't want to change the logo every time I upgrade to a new version.
Any suggestions?
.live() and .delegate() don't work like this, what you're after is still done through the .livequery() plugin or simply in the document.ready if it's present on page load, like this:
$(function() {
$('#someId').html('<p>foo bar</p>');
});
Or with .livequery() if it's replaced dynamically in the page:
$('#someId').livequery(function() {
$(this).html('<p>foo bar</p>');
});
.live() and .delegate() work off of event bubbling...an element just appearing doesn't do this whereas a click or change, etc would.
Just do it when the DOM loads.
<script type="text/javascript">
$(document).ready(function() {
$('#someId').html('<p>foo bar</p>');
});
</script>