attribute contains selector not working for dynamically added attribute

Asked Dec 09 '14 at 19:26

Active Dec 09 '14 at 19:32

Viewed 30 times

I have the following piece of code:

$(document).ready(function() {
  $("a[href*='window']").on("mouseover", function() {
    $(this).css('color', 'green');
  });
  $("a:eq(2)").click(function() {
    $(this).attr("href", "#window_1");
  });
});

a {
  padding-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#1_window">link 1</a>
<a href="#1_window_1">link 2</a>
<a href="#">link 3 (click to add substring "window")</a>

Here I'm basically trying to apply some css to a tags having the substring 'window' in their 'href' attribute on 'mouseover' event.

The code works fine for ones with predefined attribute (having the specified substring) but fails for dynamically added attributes.

How do I solve this issue?

edited Dec 09 '14 at 19:32

asked Dec 09 '14 at 19:26

Nikunj Madhogaria

2,139
2
23
40

@j08691 I think this is not a duplicate, I'm referring to *dynamically added attribute, not element.* – Nikunj Madhogaria Dec 09 '14 at 19:31
1

Actually it is. The event delegation syntax is what you need to fix your problem. – j08691 Dec 09 '14 at 19:32
but I've already used the *.on("mouseover",function(){})* technique. – Nikunj Madhogaria Dec 09 '14 at 19:35
`$(document).on("mouseover", "a[href*='window']", function () {/**/});` – Dr.Molle Dec 09 '14 at 19:36
The you're either not reading or not understanding jQuery's event delegation syntax. See http://jsfiddle.net/j08691/npyxwnk6/ – j08691 Dec 09 '14 at 19:37

attribute contains selector not working for dynamically added attribute

0 Answers0