Opening multiple windows with one click in javascript function

Question

I use the toggleDays class to expand and collapse my requests. Each request (obj) has multiple entries of Days that are links to open new tabs. For example; Request-1 can have Day-1, Day-2 . Request-2 can have Day-1, Day-2 and Day-3 .

My issue is when if I click on Day-1 of Request-2 , it opens a new tab for Day-1 of Request-1 as well as the correct tab of Request-2 . How can I make sure that I'm only opening the Day for a particular request I clicked and not all. Below is my code. Any help would be appreciated!

Thanks in advance!

May

    function GetSpecificRequest(requestId, that) {
    var parms = "{'requestId' :'" + requestId + "'}";

    jQuery.ajax({
        type: "POST",
        url: "DisplayRequests.aspx/GetSpecificRequest",
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: parms,
        success: function (response) {

            if (response.d != '') {
                var obj = JSON.parse(response.d);

                $.each(obj, function (index, item) {

                    that.next('.toggleDays')
                        .append('<div class="requestDetailItem columns4"><div class="requestItemLabel label">Day:  ' + '<a href="#" class="dayRequest">' + item.RQST_ID_CNTR + '</a></div></div')
                        .append('<div class="requestDetailItem columns4"><div class="requestItemLabel label">Print Date:  ' + $.datepicker.formatDate("mm/dd/yy", (new Date(parseInt(item.RQST_CYCL_DT.substr(6))))) + '</div></div')
                        .append('<div class="requestDetailItem columns4"><div class="requestItemLabel label">Status:  ' + item.RQST_STAT_CD + '</div></div')
                        .append('<div class="requestDetailItem columns4"><div class="requestItemLabel label">Copies Matched:  ' + item.RQST_NBR_MTCH + '</div></div')
                        .append('<div class="rowSeparatorShort"></div');
                });

                $('.dayRequest').bind('click', function () {
                    var day = $(this)[0].innerHTML;
                    window.open("DisplaySearchCriteria.aspx?RequestID=" + requestId + "&RequestCtr=" + day);
                });
            }
            return false;
        },
        error: function (httpRequest, textStatus, errorThrown) {
            LogAjaxErrorToServer(httpRequest, textStatus, errorThrown, parms, "GetSpecificRequest");
        }
    });
}

Answer 1

You keep binding to the click event of all .dayRequests for each obj . You can add an ID to your link and bind to that. ie

.append('<div class="requestDetailItem columns4"><div class="requestItemLabel label">Day:  ' + '<a href="#" class="dayRequest" id="' + requestId + '">' + item.RQST_ID_CNTR + '</a></div></div')

 $('#' + requestId).bind('click', function () {
     var day = $(this)[0].innerHTML;

Or add the requestId as a data attribute to your links and bind to click outside your ajax call.

.append('<div class="requestDetailItem columns4"><div class="requestItemLabel label">Day:  ' + '<a href="#" class="dayRequest" data-requestid="' + requestId + '">' + item.RQST_ID_CNTR + '</a></div></div')

on your document.ready:

$(document).bind("click", ".dayRequest", function()
{
    //take attributeid here
});