How To Detect a Button Click in the Expanded Accordion Row

问题

I have an accordion which gets populated based on a dropdown selection. In the 'details' section of each accordion row, I have a button which simply hides the entire accordion and shows a div (which is hidden by default). The div contains the same details as the row selected as well as some additional fields to allow a request be submitted for that item. The first accordion row works fine but when I click on any other row, nothing happens.

I'm assuming this is because the buttons are named the same in each row. I can easily add the row identifier to the end of the button name to differentiate each but I can't figure out how to detect which is selected in my jQuery.

The page works as follows: When a dropdown selection is made, I pass it's value to a SQL statement. Then I loop through each database row and populate my accordion control. Each row can be expanded to show a details section which contains a button used to show the hidden div. When the button is clicked, I use jQuery to pass those values to labels in the hidden div.

<div class="accordion" id="accordion2">
<?php
if (isset($_GET['src'])) {
// SQL stuff here

$group = null;

while ($row = odbc_fetch_array($db)) {

    if ($row['Name'] != $group) {
        echo "<div class='accordion-heading'>";
            echo "<a class='accordion-toggle' data-toggle='collapse' 
              data-parent='#accordion2' href='#", $row['Number'],"'>
              <button id='buttonAccordionToggle' 
              data-target='#", $row['Number'],"'>", $row['Name'],"</button></a>";
        echo "</div>";
        echo "<div id='", $row['Number'],"' class='accordion-body collapse'>";
            echo "<div class='accordion-inner'>";
                echo "<div class='control-group' style='min-height: 50px'>";
                    echo "<div class='row-fluid show-grid'>";
                        echo "<div class='span12'>";
                            echo "<div class='span1'>";
                                echo "<label>Name:</label>";
                            echo "</div>";
                            echo "<div class='span11'>";
                                echo "<label id='labelAccordionName'>", 
                                  $row['UserName'],"</label>";
                            echo "</div>";
                            echo "</div>";
                            echo "<div class='span12'>";
                                echo "<a id='select' class='btn'>Select</a>";
                            echo "</div>";
                        echo "</div>";
                    echo "</div>";
                echo "</div>";
            echo "</div>";

            $group = $row['Name'];
        }
    }
}
?>
</div>

<div id="divDetails" style="display: none;">
    <label>Name:</label>
    <label id="labelName"></label>
    <a id="close" class="btn">Close</a>
</div>

<script>
// Hide the accordion and show the hidden div
$('#select').click(function() {
    $('#accordion2').hide();
    $('#divDetails').show();
    // Pass the label value from the accordion row to the hidden div label
    $('#labelName').html($('#labelAccordionName').html());
});

// Hide the div and show the accordion again
$('#close').click(function() {
    $('#accordion2').show();
    $('#divDetails').hide();
});

// Only allows one row to be shown at a time
$('.accordion-toggle').click(function() {
    var $acc = $('#accordion2');
    $acc.on('show', '.collapse', function() {
        $acc.find('.collapse.in').collapse('hide');
    });
});

$(document).ready(function(){
    // On dropdown change, pass in value to populate accordion/details
    $('#dd').change(function() {
        var r = $(this).val();
        location.href = "test.php?src=" + r;
    });
});
</script>

I know I can add an identifier to the Select button like below but I don't know how to catch that using jQuery:

echo "<a id='select", $row['Number'],"' class='btn'>Select</a>";

Again, the first row works exactly how it should but nothing happens when I click the Select button on any of the other rows.

回答1:

You can't duplicate element id's. You already have a class of btn on the element, so just bind the event handler to that instead:

$('a.btn').click(function() {
    ...
});

edit

In order to get the relevant label text, you'll have to traverse the DOM using this (which refers to the clicked btn).

First, make sure you're not duplicating the id of the label element, change:

<label id='labelAccordionName'>

<label class='labelAccordionName'>

Then, you should be able to use the following (in your a.btn click handler):

$(this).parent().prev().find('.labelAccordionName').html();

来源：https://stackoverflow.com/questions/16567978/how-to-detect-a-button-click-in-the-expanded-accordion-row

标签

php

jquery

accordion