Question

I ran into a small problem. here is a sample what im doing.

 htmlValue += '<a href="#" id="shareOpen" style="margin: 0 2px 0 2px; float: left;" 
title="Share File" class="version ui-icon ui-icon-heart"></a>';
 $(modalDivObj).html(htmlValue);

I am writing this on a loop on a page with a bunch of other functions. and everything is writing fine and appears. However, when I click on #shareOpen the dialog won’t open. I tried just hard coding the same html and it works fine. The problem is when I do it through .html() it won’t write the ID? I don’t know.

here is some of the on page html and jquery.

$("#shareFile").dialog({
        autoOpen: false,
        modal: "true",
        show: "blind",
        hide: "explode",
        buttons: {
            "Done": function () {
                $(this).dialog("close");
            }
        }
    });
    $("#shareOpen").click(function () {
        $("#shareFile").dialog("open");
        return false;
    });
 <div id="shareFile"  runat ="server">



 </div>   

Answer 1

From what you’ve said I think the most likely issue is that the click event is not being bound correctly.

Try using the following instead of your current call to click:

$("#files-icons").on("click", "#shareOpen", function () {
    $("#shareFile").dialog("open");
    return false;
});

This will bind the event handler to any elements with ID ‘shareOpen’ that are children of #files-icons, regardless of when they are added to the page.

I believe the problem is that you are binding a click handler on an element that doesn’t yet exists in the page.