CODEWITHSUNDEEP
ms-wordoffice-jsadd-in
Chris G.
Chris G.

Reputation: 339

How to capture click event on dynamic content in task pane?

I've got some code that successfully takes text from the document, does some stuff with it, and renders variations in dynamic divs in the task pane.

Right now I'm just trying to register a click on one of the dynamic divs in the console log but I don't see any event happening. But when I stop and restart the code in VS I see this in the console...

Item Details Clicked! undefined

So, something is registering.

I'm reading the Office.js docs and other blog posts but can't seem to find what I'm doing wrong.

I've tried variations of these to no avail.

// dynamic div
var myDetails = 'details-S' + myId + 'I' + idxWarn;
var myDetLink = ' <div class="linkItemDetails" id="' + myDetails + '">...</div>';

function clickedItemDetails() {
console.log("Item Details Clicked! " +JSON.stringify(this));
}

$('.linkItemDetails').click(clickedItemDetails);
$('.linkItemDetails').on('click', clickedItemDetails());
$('.vtsItemDetails').bind("click", clickedItemDetails);
$('#parentDivItemCategories').on('click', '.linkItemDetails', function () { clickedItemDetails() });

Now, when I stop and restart the code in VS I see this in the console... Item Details Clicked! undefined

So, something is registering, somewhere. Just not when/where/how I want it to.

Can someone point me in the right direction?

Upvotes: 0

Views: 39

Answers (1)

Chris G.
Chris G.

Reputation: 339

Disregard. I had the right code but with the wrong parent div ID. Feeling like a total newb. But wait, I am! Anyway, this code works if you have the right parent div ID

$('#parentDivItemCategories').on('click', '.linkItemDetails', function () { clickedItemDetails() });

Upvotes: 1

Related Questions