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() stackoverflow.com/questions/4579117/jquery-live-vs-delegate — scniro
– scniro, Commented Jan 8, 2015 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
– KrishnaDhungana, Commented Jan 8, 2015 at 22:15

matthias_h · Accepted Answer · 2015-01-08 22:02:59Z

2

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.

answered Jan 8, 2015 at 22:02

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vadim.zhiltsov · Accepted Answer · 2015-01-08 22:03:00Z

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 8, 2015 at 22:03

vadim.zhiltsov

9,6042 gold badges17 silver badges16 bronze badges

1 Comment

NKD Over a year ago

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.

Gary Storey · Accepted Answer · 2015-01-08 22:03:33Z

1

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');
});

answered Jan 8, 2015 at 22:03

Gary Storey

1,7822 gold badges15 silver badges19 bronze badges

Comments

damianmr · Accepted Answer · 2015-01-08 22:08:17Z

0

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.

answered Jan 8, 2015 at 22:08

damianmr

2,5311 gold badge17 silver badges15 bronze badges

Collectives™ on Stack Overflow

Jquery/Javascript does not work on partial view

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related