0

I have a table of rows that are dynamically managed via listjs. I have made these rows clickable to open a Bootstrap Modal based on a data attribute (data-modal). This all works fine except for when a link appears in the columns of the rows. Both the anchor is firing and the modal is opening.

To prevent this, I used the following code, which worked on initially loaded elements:

$("[data-modal]").on("click", "a:not(.open-disabled)", function(e) {//open modal code}

But as expected, this doesn't bind to dynamically injected rows or divs.

So I changed my code to try binding to $(document) instead, but I can't get the :not selector to chain properly -- the selectors aren't being properly identified and the modal does not open.

Here is what I changed my code to:

$(document).on("click", "[data-modal], a:not(.open-disabled)", function(e) {}

Questions: A. How do I chain selectors in the above to prevent the modal from opening if there is an anchor child element that is being clicked.

B. Is there a better method of preventing the modal from opening?

activelogic
  • 1,325
  • 3
  • 14
  • 24
  • I tried the method described here: http://stackoverflow.com/questions/4045431/jquery-filtering-has-not -- it works partially, but now the entire row that an anchor tag is present on is not clickable. – activelogic Mar 24 '14 at 22:11

2 Answers2

0

Try this,

$(document).on("click", "[data-modal] > a:not(.open-disabled)", function(e) {}
                         //-----------^ use child selector here
Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
0

I found a solution by implementing the method described here: https://stackoverflow.com/a/8696420/2659318

Here is the resulting code:

  $(document).on("click", "[data-modal]", function() {
    $(this).modal();
  });

  $(document).on("click", "a.open-disabled", function(e) {
    if (!e.stopPropagation) {
      e.cancelBubble = true;
      return;
    }

    e.stopPropagation();
  })
Community
  • 1
  • 1
activelogic
  • 1,325
  • 3
  • 14
  • 24