Is there a method in jquery which repeats outputting and appending with multiple clicks

Question

I am trying to write a searchbar and want to have a dynamic amount of params for the search Therefore I am trying to get jquery to firstly load the searchbar (in another file) and then clone it and append it to the body

I already tried changing serveral selectors but it doesnt work as expected

This is my jquery script

        $(document).ready(function(){
            $("#add").click(function(){
                $("#add_div").load("test.php");
            });
            $("#addbutton").click(function(){
                $("#add_div").clone().appendTo("body")
            });
        });

test.php contains the searchbar

The first load is running as expected (I get the searchbar once) but all clicks on the 'addbutton' (which is loaded with the searchbar) dont do anything

EDIT: fixed a small mistake

`$("addbutton")` is not a valid selector. I'm presuming you're missing a `.` or `#` prefix. — Rory McCrossan, Mar 25 '19 at 10:16
Thanks @RoryMcCrossan for ponting out , did fix that but still no joy — John, Mar 25 '19 at 10:20
If the 'addbutton' element added to the DOM in the `load()` call? — Rory McCrossan, Mar 25 '19 at 10:21
In which case you need to use a delegated event handler: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Rory McCrossan, Mar 25 '19 at 10:25

score 0 · Answer 1 · answered Mar 25 '19 at 10:17

0

the $("addbutton") selector must be wrong, it searches for the addbutton element which isn't a valid html element.

answered Mar 25 '19 at 10:17

Hagai Wild

1,307
7
17

Is there a method in jquery which repeats outputting and appending with multiple clicks

1 Answers1