Jquery/Javascript does not work on partial view

Question

I have a main view calls Index which contains some textboxes and allow additional textboxes to be added to the screen via partial view calls. The main view reference a js file which has the following code:

External JS file:

$("input[type='text']").on("change", function () {
 alert("here");
});

The code works whenever I modify a value in a textbox loaded by the main view. However, it does nothing when I attempted to change the value from a textbox that is added by partial view.

Per my understanding, the live() method should handle the current element in the dom and any future element added to the dom. This is now being replaced with .on(). Hence, I'm using .on(). Is there anything new that is replacing .on() that I don't know of? .live() and .on() don't work in my case.

For good practices, I don't want to have the js/jquery code added to the partial view again to make it works. I'm hoping to avoid redundancy and implement good practices. Any help is appreciated.

look into `delegate()` http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate — scniro, Jan 08 '15 at 22:01
I think if you are concerned with right way, you should consider event bubble up. If elements are always added in the specific container, better write delegation based on that specific container context because $(body) or $(document) will bubble up all the way up... — KrishnaDhungana, Jan 08 '15 at 22:15

score 2 · Accepted Answer · answered Jan 08 '15 at 22:02

The on() has to be bound to an element that already exists in the DOM when the page is loaded to delegate the event to the element that was added dynamically:

$(document).on("change", $("input[type='text']"), function () {
  alert("here");
});

Instead of $(document) any static parent element can be used to delegate the event.

score 1 · Answer 2 · answered Jan 08 '15 at 22:03

1

Try to use following code:

$(document).on("change", "input[type='text']", function () {
 alert("here");
});

document can be changed on any parent node for both inputs

answered Jan 08 '15 at 22:03

vadim.zhiltsov

9,294
2
15
16

thank you it works! I didn't know this. Can I possibly accept two of the same answer? you and matthias_h answered about the same time. – NKD Jan 08 '15 at 22:11

score 1 · Answer 3 · answered Jan 08 '15 at 22:03

You should use event delegation. Put all of your inputs inside a container div and put the event on this parent element. It will work for dom elements added dynamically. So if you put them in:

<div class="container">
  <input ...>
  <input ...>
  <input ...>
</div>

the jQuery would be:

$('.container').on('change','input[type="text"]', function(e) {
  var el =e.target;  //if you need the element clicked on
  alert('here');
});

score 0 · Answer 4 · answered Jan 08 '15 at 22:08

So, basically you are trying to delegate the event. To do so, as per jQuery documentation says, you need to use something like this:

```

$('body').on('change', 'input[type="text"]', function(e) { 
  console.log(e.target); // the input that triggered the event
  console.log(e.currentTarget); // the body element
});

```

Listening for events in the body might be too much, you may want to listen 'change' events within some specific form or element.

Jquery/Javascript does not work on partial view

4 Answers4