Javascript functions still remain after loading another partial

Question

let's suppose the browser rendered following page

<html>
...
<body>
<div id="partialContainer">
<script>
function saveItems(){
    /* do somthing*/
}
</script>
<input type="button" id="btnTest" name="btnTest" value="Test" onclick="saveItems()"/>
</div>
</body>
</html>

after an AJAX call and change the "partialContainer" content using

$("#partialContainer").html(returnedMarkup)

saveItems function still remains in page and can get executed how can remove this function when markup get replaced to avoid name colissioning

you can disable or remove input button on click of which you are calling this function — Bhushan Kawadkar, Sep 28 '15 at 13:48
possible duplicate of [How can I dynamically unload a javascript file?](http://stackoverflow.com/questions/591685/how-can-i-dynamically-unload-a-javascript-file) — James Thorpe, Sep 28 '15 at 13:50
@JamesThorpe each partial may have it own script(s) by itself witch doesn't referenced to a js file — Hossein Salmanian, Sep 28 '15 at 13:56
*How* does it get executed? If you need to change page functionality at the UI level then do it at the UI level rather than mucking with underlying functionality. — Dave Newton, Sep 28 '15 at 14:02

score 0 · Answer 1 · answered Sep 28 '15 at 13:49

0

var saveItems = function () {}

After your Ajax, assign some other value to it, preferably the one above.

answered Sep 28 '15 at 13:49

nhaa123

9,570
11
42
63

score 0 · Answer 2 · answered Sep 28 '15 at 13:55

0

Try setting saveItems to undefined

   $("#partialContainer").html(returnedMarkup);
    if (!!saveItems && $.isFunction(saveItems)) saveItems = void 0;

answered Sep 28 '15 at 13:55

guest271314

1
15
104
177

i want to remove each function used in a dome element witch is replaced – Hossein Salmanian Sep 28 '15 at 14:04

score 0 · Answer 3 · edited Sep 28 '15 at 14:01

0

On your ajax success callback function, just do:

$("#btnTest").prop( "onclick", null );

Be aware that $.removeAttr('onclick') will fail in ie 6-8, so .prop() is better.

edited Sep 28 '15 at 14:01

Dave Newton

158,873
26
254
302

answered Sep 28 '15 at 14:00

Sergeon

6,638
2
23
43

the main problem is that btnTest already removed from DOM but the function still remains and may cause function colissioning – Hossein Salmanian Sep 28 '15 at 14:07
Oh, i see. Did you try: " delete saveItems; " ? – Sergeon Sep 28 '15 at 14:30

score 0 · Answer 4 · answered Sep 28 '15 at 14:01

0

You could put your function in an object literal:

var obj = { saveItems: function() { } }

and delete it after the ajax

delete obj.saveItems

answered Sep 28 '15 at 14:01

Sagi

8,972
3
33
41

Javascript functions still remain after loading another partial

4 Answers4