Develop Reference

jQuery get attribute of clicked element when content is dynamically generated

I am working on a site where a lot of content is generated dynamically using AngularJS. I need to get the attribute of an element that is dynamically generated using jQuery, but I am having trouble doing so. I have already figured out that I need to use the .on method to click rather than .click. My issue is finding the equivalent of $(this) within the .on method.
Here is my code:
$(document.body).on('click', 'a.card-topic-link' ,function(e) {
e.preventDefault(); // Prevent default action - this works
console.log('The click works!'); // This fires and works just fine
var cardTopicLink = $(this).attr('data-topic-link'); // This is where the problem lies
console.log(cardTopicLink); // This is undefined
}); // End on click
As I stated before, this does not work as the .click does not work for dynamic content:
$('a.card-topic-link').click(function(e) {
e.preventDefault(); // Prevent default action
var cardTopicLink = $(this).attr('data-topic-link');
console.log(cardTopicLink);
});
I feel like there is a simple solution to this problem that I am having trouble finding. The key to this issue is that this is dealing with dynamic content.
Let me know if you have any ideas.

use e.currentTarget, instead of var cardTopicLink = $(this).attr('data-topic-link');, try var cardTopicLink = angular.element(e.currentTarget).attr('data-topic-link');
$(document).ready(function () {
$(document.body).on('click', 'a.card-topic-link' ,function(e) {
e.preventDefault(); // Prevent default action - this works
console.log('The click works!'); // This fires and works just fine
var cardTopicLink = $(e.currentTarget).attr('data-topic-link'); // This is where the problem lies
console.log(cardTopicLink);
}); // End on click
});
plunker with similar code, firing on async loaded content - http://plnkr.co/edit/02rqCrbBVwXiIYff8ktC?p=preview

It turns out that AngularJS was stripping out the attribute data-topic-link as it was parsed. This was happening because the HTML that contained the data-topic-link was passed as a part of the response that Angular was printing in an ng-repeat.
I updated the code so that the HTML with this attribute did not need to be served by AngularJS.

How to set focus on rich-text-field, in edit-mode of a contenttype?

I'd like to initially set the focus onto the text-field of an item when editing it, but cannot overcome TinymMCE'S iframe kickin' in. When disableling TinyMCE, everything works as expected, the text-field is focusable. I tried simulating a click in TinyMCE's body-element, no luck either. Is it possible at all, to focus the body-field via JS?
This is what I tried so far:
(function($) {
$(document).ready(function() {
$('#text').focus() // Only works, when TinyMCE is disabled.
$('body#content').click() // Cannot click into TinyMCE's body.
$('#text_bold').click() // Cannot even click one of the editor's buttons.
setTimeout(function() {
// Tried same as above with time-delay, no luck.
}, 277);
});
$(window).load(function() {
// Tried the same as in doc.ready, no luck.
});
})(jQuery);

I know this is kind of old but I definitely struggled finding a solution for this online, so I'm sharing. Add this, in your tinymce.init() codeblock. Change selector or event if needed.
selector: "textarea.tinymce",
setup: function (editor) {
editor.on('mouseup', function (e) {
this.focus();
});
}

TinyMCE is loaded inside an IFRAME so it's not in the DOM of the main document. Direct jQuery calls will not work.
This is an old code I used (TinyMCE version shipped with Plone 4.3):
(function($) {
function checkTinyMCELoaded () {
if (window.tinymce==undefined || !tinymce.editors.length) {
setTimeout(checkTinyMCELoaded, 100);
return;
}
$('#text_ifr').contents().find(".mceContentBody").get(0).focus();
}
$(document).ready(function() {
setTimeout(checkTinyMCELoaded, 100);
});
})(jQuery);
It's ugly. Best way is to get rid of setTimeout and attach an handler on TinyMCE load event, but when I looked into this I found this is not so easy on Plone as you must change the .init() call of TinyMCE done by Plone JS.

How can I bind click events to html tags inside tinymce editor?

I am creating a dialogue to enable inexperienced editors to correctly insert blockquotes into tinymce editor.
I want them to be able to click on the block quote and open it again in the dialogue for editing.
But how can I bind click events to the tags inside the editor? Here's the sort if thing I have tried (elm1 is the text editor, and I am using alert as poc)
$('#elm1 blockquote').click(function () {
var mh = $(this).html();
alert(mh);
})

You could also try registering your click event with the $.on method (doc here).
$("#elm1 blockquote").on("click", function(e, el) {
alert(el.html());
});
Also, since the context of your question did not include where and when your click handler is added, you might want to make sure that the event you have bound to your selector ($('#elm1 blockquote') when it is available, such as wrapping it with $(document).ready().
UPDATE (based on Iframe):
In jquery, it might look more like:
var blockquote $("#elm1_ifr").contents().find("blockquote");
// OR: var blockquote $("#elm1_ifr").contents().find("#tinymce");
$(blockquote).on('click', function(e, el) { // Logic here... });

Javascript isn't firing in <script> but works in the phonegap function onBodyLoad(), why is this?

Earlier I asked a question about showing or hiding a div when a radio button is selected. The solution provided is here http://jsfiddle.net/MFJUv/1/
I'm using phonegap. When I place the javascript code to hide a div within the onBodyLoad() function necessary for phonegap, it works.
However when not using phonegap and placing the same code within a code tag it never fires and the div is never hidden. Do I need to include another function to fire this once the page has completely loaded?
$('#machinedropdown').hide()
$('input').change(
function(){
if ($(this).is(':checked') && $(this).attr('id') == 'radio-choice-h-6c') {
$('#machinedropdown').show()
}
else {
$('#machinedropdown').hide()
}
});

You need to put this code inside
$(document).ready(function(){
//...
});
similar to phoneGap's onBodyLoad() event.

Place your code in an appropriate ready handler, but if I had to guess without knowing much about phonegap or the context, all of your code should be handled inside of a
$(document).ready(function()
{
// here
});

jqModal only works after element's been inserted on the page

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.