stopPropagation on link click

[MattP]

    $(document).delegate(".divDocument", "click",
        function (event) {
            var detailsDiv = $(this).find('#document-details');
            if (detailsDiv[0].children.length == 0) {
                LoadDocumentDetails($(this).find('#document-details'), this.id);
            } else {
                detailsDiv.toggle(1000);
            }
        }
    );

I'm trying to stop the toggle from happening when I click on a link in the div.

    $("#corrContent a").click(function (event) {
        event.stopPropagation();
    })

Here's the method I'm trying to use to stop the event from bubbling up. The problem I'm having is that this method isn't getting hit so I must have the selector wrong somehow.

            success: function (data, textStatus, jqXHR) {
                //Data loaded successfully.  Clear the loader and show details
                $(div).removeClass("divLoading");
                $(div).empty();
                var results = data.GetCorrespondenceByIDResult;
                var correspondence = results.RootResults[0];
                var doc = results.IncludedResults[0];
                var contact = results.IncludedResults[1];
                $(div)
                    .html('<div id="corrContainer">\
                        <div id="corrFileContact">\
                            <p>' + contact.FirstName + ' ' + contact.LastName + '</p>\
                            <p>' + contact.BusinessName + '</p>\
                        </div>\
                        <div id="corrContent">\
                            <p style="float:left;"><a onClick=\'OpenRadWindow(\"../WebTwain/ViewDocument.aspx?iImageIndex=' + doc.ID + '&ImageName=' + doc.FileName + '&ImageExtType=' + doc.FileType + '\")\'>' + doc.FileName + '</a></p>\
                            <p style="float:right; margin-right:50px;">' + readableFileSize(doc.FileSize) + '</p>\
                        </div><div id="corrFooter">\
                            <p>Created By:</p>\
                            <p>' + correspondence.CreatedBy + '</p>\
                            <p>' + new Date(parseInt(correspondence.CreatedDate.substr(6))).format("MMMM d, yyyy") + '</p>\
                        </div>\
                    </div>');
            }

Here's the success portion of the ajax call where I add the link.

[SambaNeko]

I'm not sure that your usage of delegate() is really appropriate; would need to see more of your code to tell. But, as it is, you'll seemingly need to use delegate() to stop propagation as well:

  $("#corrContent").delegate("a", "click", function(event){
    event.stopPropagation();
  });

[MattP]

That's not getting hit either.

Not sure how much additional code I have to show you.

I've extended the repeater class to let me supply my own templates. Here's the one we're dealing with.

                <DocumentTemplate>
                    <div class="divCorrespondence">
                        <div class="divDocument" id='<%# DataBinder.Eval(Container.DataItem, "ID") %>'>
                            <asp:Label ID="DocumentLabel" runat="server" Text="Document" BackColor="#CCCCFF" Width="125px" style="text-align:center;padding:5px;" />
                            <div class="divCorrespondenceRight">
                                <span>Date Added: </span>
                                <asp:Label ID="DocumentCreated" runat="server" Text='<%# Eval("DateCreated", "{0:MMMM d, yyyy}") %>' />
                            </div>
                            <div id="document-details"></div>
                        </div>
                    </div>
                </DocumentTemplate>

And here's the full ajax call which is hitting a WCF RIA service with a Json endpoint.

    function LoadDocumentDetails(div, ID) {
        $.ajax({
            type: 'GET',
            url: '/Data/Models/CRM-Data-Services-CrmService.svc/Json/GetCorrespondenceByID',
            data: { "CorrespondenceID": +ID },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            beforeSend: function () {
                $(div).addClass("divLoading");
                $(div).html('<div><img src="Images/ajax-loader.gif" alt="Loading..." /></div>');
            },
            success: function (data, textStatus, jqXHR) {
                //Data loaded successfully.  Clear the loader and show details
                $(div).removeClass("divLoading");
                $(div).empty();
                var results = data.GetCorrespondenceByIDResult;
                var correspondence = results.RootResults[0];
                var doc = results.IncludedResults[0];
                var contact = results.IncludedResults[1];
                $(div)
                    .html('<div id="corrContainer">\
                        <div id="corrFileContact">\
                            <p>' + contact.FirstName + ' ' + contact.LastName + '</p>\
                            <p>' + contact.BusinessName + '</p>\
                        </div>\
                        <div id="corrContent">\
                            <p style="float:left;"><a onClick=\'OpenRadWindow(\"../WebTwain/ViewDocument.aspx?iImageIndex=' + doc.ID + '&ImageName=' + doc.FileName + '&ImageExtType=' + doc.FileType + '\")\'>' + doc.FileName + '</a></p>\
                            <p style="float:right; margin-right:50px;">' + readableFileSize(doc.FileSize) + '</p>\
                        </div><div id="corrFooter">\
                            <p>Created By:</p>\
                            <p>' + correspondence.CreatedBy + '</p>\
                            <p>' + new Date(parseInt(correspondence.CreatedDate.substr(6))).format("MMMM d, yyyy") + '</p>\
                        </div>\
                    </div>');
            },
            error: function (jqHXR, textStatus, errorThrown) {
                //An error occurred.  Clear the loader and show error message
                $(div).removeClass("divLoading");
                $(div).empty();
                $(div).html('<p><strong>An error occurred while loading the details.</strong></p>');
            }
        });
    }

[SambaNeko]

My mistake: the selector on which you use delegate() is the element that gains an event listener for any existing or future descendents; #corrContent does not exist until after your AJAX operation, therefore using delegate() on it (at page load) is meaningless.

So mostly you need to change the selector on which you delegate; any ancestor (that exists at page load) will do:

$('.divDocument').delegate("#corrContent a", "click", function(event){
  event.stopPropagation();
});

As for what I was saying about delegate() before, it should be more efficient to use specific event handlers (such as click()) if you can, and it looks like .divDocument is present at page load - so you might be able to switch from '$(document).delegate(".divDocument", "click"' to '$(".divDocument").click('.

[MattP]

This does get hit when the page loads, but doesn't prevent the div from toggling when clicking on the link in it.

As for the click method on the div I couldn't get it to work correctly. Here's the original method I was trying to use.

//    $(".divDocument").click(function () {
//        var detailsDiv = $(this).find('#document-details');
//        if (detailsDiv[0].children.length == 0) {
//            LoadDocumentDetails($(this).find('#document-details'), this.id);
//        } else {
//            detailsDiv.toggle(1000);
//        }
//    });

[SambaNeko]

Is your jQuery script contained within a $(document).ready() function?

$(document).ready(function(){

    $(document).delegate(".divDocument", "click",
        function (event) {
            var detailsDiv = $(this).find('#document-details');
            if (detailsDiv[0].children.length == 0) {
                LoadDocumentDetails($(this).find('#document-details'), this.id);
            } else {
                detailsDiv.toggle(1000);
            }
        }
    );

  $('.divDocument').delegate("#corrContent a", "click", function(event){
    event.stopPropagation();
  });

});

function LoadDocumentDetails( ...

[MattP]

Gah, it was until I commented it out this morning testing things. That fixed it.

So glad tomorrow is a holiday.