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
– Bhushan Kawadkar, Commented Sep 28, 2015 at 13:48
possible duplicate of How can I dynamically unload a javascript file? — James Thorpe
– James Thorpe, Commented Sep 28, 2015 at 13:50
@JamesThorpe each partial may have it own script(s) by itself witch doesn't referenced to a js file — Hossein Salmanian
– Hossein Salmanian, Commented Sep 28, 2015 at 13:56
@HosseinSalmanian It's pretty irrelevant whether a <script> tag has script within itself or is including an external file - once the file is loaded and executed, it may as well have been inline, ie the answers are more or less the same whether you have inline script or external files. — James Thorpe
– James Thorpe, Commented Sep 28, 2015 at 13:57
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
– Dave Newton, Commented Sep 28, 2015 at 14:02

nhaa123 · Accepted Answer · 2015-09-28 13:49:25Z

0

var saveItems = function () {}

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

answered Sep 28, 2015 at 13:49

nhaa123

9,83811 gold badges46 silver badges63 bronze badges

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

Comments

guest271314 · Accepted Answer · 2015-09-28 13:55:46Z

0

Try setting saveItems to undefined

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

answered Sep 28, 2015 at 13:55

guest271314

1

1 Comment

Hossein Salmanian Over a year ago

i want to remove each function used in a dome element witch is replaced

Sagi · Accepted Answer · 2015-09-28 14:01:08Z

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, 2015 at 14:01

Sagi

9,3643 gold badges38 silver badges43 bronze badges

Comments

Dave Newton · Accepted Answer · 2015-09-28 14:01:30Z

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, 2015 at 14:01

Dave Newton

161k27 gold badges264 silver badges311 bronze badges

answered Sep 28, 2015 at 14:00

Sergeon

6,7982 gold badges29 silver badges44 bronze badges

2 Comments

Hossein Salmanian Over a year ago

the main problem is that btnTest already removed from DOM but the function still remains and may cause function colissioning

Sergeon Over a year ago

Oh, i see. Did you try: " delete saveItems; " ?

Collectives™ on Stack Overflow

Javascript functions still remain after loading another partial

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related