jQuery上的.each问题

i have the following snippet:

function refreshListeners() {
    $('div.element').each(function () {
        xid = $(this).find('input.xid').val();
        xpath = $(this).find('input.xpath').val();
        detailbtnobj = $(this).find('span.detailbutton');
        downloadbtnobj = $(this).find('span.downloadbutton');
        $(downloadbtnobj).click(function () {
            $('#popup').bPopup({
                contentContainer: '#popupcontent',
                loadUrl: 'ajax.php?module=request-detail&xid=' + xid + '&c=dl&xpath=' + xpath
            });
        });
        $(detailbtnobj).click(function () {
            $('#popup').bPopup({
                contentContainer: '#popupcontent',
                loadUrl: 'ajax.php?module=request-detail&xid=' + xid + '&c=de&xpath=' + xpath
            });
        });
    });
}

My problem here is, that every "detailbtnobj" respective, every Detail-Button have thee same click Listener.

The html looks like this:

<div class="element highlight">

    <input class="xid" value="48026" type="hidden">

    <input class="xpath" value="/m/48026/Download-Title.html" type="hidden">

    <p class="title">Download Title </p>

    <img src="48026-4b19dc03.JPG">

    <p class="descriptiontext">Description casaois aoisj diaj ds jaoj idj</p>

    <p class="countsrc">25 Sources</p>

    <p class="buttonset">

        <span class="detailbutton">Details</span><span class="downloadbutton">Download</span>

    </p>

</div>

I have multiple objects like this which are generated also by an ajax live-search. After the search function the refreshListeners() is caled which should open a (different) popUp on each item.

But as i said, every Button now opens the popUp with the credentials of the LAST ".element".

any hints? :(

thanks in advance

You can use .data(), it store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

Here I have saved loadUrl using .data() with the element and when you click the data will be fetched and used

function refreshListeners() {
    $('div.element').each(function () {
        xid = $(this).find('input.xid').val();
        xpath = $(this).find('input.xpath').val();
        detailbtnobj = $(this).find('span.detailbutton');
        detailbtnobj..data('loadUrl', 'ajax.php?module=request-detail&xid=' + xid + '&c=de&xpath=' + xpath);
        downloadbtnobj = $(this).find('span.downloadbutton');
        downloadbtnobj.data('loadUrl', 'ajax.php?module=request-detail&xid=' + xid + '&c=dl&xpath=' + xpath);
    });
    $('span.detailbutton, span.downloadbutton').click(function () {
        $('#popup').bPopup({
            contentContainer: '#popupcontent',
            loadUrl: $(this).data('loadUrl')
        });
    });
}

You overwrite the value of the xid, xpath, detailbtnobj and downloadbtnobj while you loop through all the elements. This won't be a problem for detailbtnobj and downloadbtnobj since you use them immediately, but the xid and xpath variables are not used until the click event fires and by that time they point to something else (the last value assigned).

An easy sollution is to make the scope of those variables local to the each function by explicitly declaring them using 'var'.

$('div.element').each(function () {
        var xid = $(this).find('input.xid').val();
        var xpath = $(this).find('input.xpath').val();
        ...
});