模态窗口在同一查询实例上多次打开

Question

I think I just need to re-work this code. Here is my problem.

I am calling a query to show a list of "offers" underneath Categories. These links are then clicked and they are opening in a modal box from jquery.

Everything works great! However, there are some offers that are the same underneath different categories ( same unique ID ).

When more than one offer link is on the page, and if you click it, it will load the modal window twice.. because there are more than one instance on that page.

I know what the problem is , but I can't get my head around how to code it correctly! I know I don't need to create or call the script every time in my query ??

Thanks, here is my query code:

$line .= '<span class="icon-caret-right"></span> <a id="manual-ajax'.$offer_id.'" href="view.php?o='.$offer_id.'">'.$offer_title.'</a><br />';  


$line .= " <script> $('#manual-ajax$offer_id').click(function(event) {
              event.preventDefault();
              $.get(this.href, function(html) {
              $(html).appendTo('body').modal();

      });
    });

</script>";

Answer 1

The problem is that your IDs aren't unique, as they're required to be. So when the same ID reappeared, you were binding additional click handlers to the elements.

But you don't need IDs if you use a class instead.

$line .= '<span class="icon-caret-right"></span> <a class="manual-ajax" href="view.php?o='.$offer_id.'">'.$offer_title.'</a><br />';

then write a single handler:

$(function() {
    $(".manual-ajax").click(function(event) {
        event.preventDefault();
        $.get(this.href, function(html) {
            $(html).appendTo('body').modal();
        });
    });
});