Funktions aufruf ohne event

[CM6687]

Hallo zusammen,

vorab, ich bin ein totaler JS noob!
Falls ich mich mit meinem Topic hier falsch befinde, tut es mir leid, weißt mich drauf hin und ich korrigiere das.

Ich betreibe eine Seite in der ich JS anwenden muss, zwecks einem LiveSearch (PHP,JS,MYSQL).

Folgendes Problem:

            <style type="text/css">
    body{
        font-family: Arail, sans-serif;
    }
    /* Formatting search box */
    .search-box-name{
        width: 250px;
        position: relative;
        display: CODE-block;
        font-size: 14px;
        
    }
    .search-box-name input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
        
    }
    .result{
        position: absolute;
        z-index: 999;
        top: 100%;
        left: 0;
        background: #ffffff;
        
        
    }
    .search-box-name input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
        
        
    }
    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        
        
    }
    .result p:hover{
        background: #f2f2f2;
        
    }
</style>

            <script src="js/jquery-1.12.4.min.js"></script>
            <script type="text/javascript" >
            
            $(document).ready(function(){
                $(".search-box-name input[type='text']").on("keyup input", function(){
                    /* Get input value on change */
                    var inputVal = $(this).val();
                    var resultDropdown = $(this).siblings(".result");
                    if(inputVal.length){
                        $.get("name-backend-search.php", {term: inputVal}).done(function(data){
                            // Display the returned data in browser
                            resultDropdown.html(data);
                        });
                    } else{
                        resultDropdown.empty();
                    }
                });
                
                // Set search input value on click of result item
                
                $(document).on("click", ".result p", function(){
                    $(this).parents(".search-box-name").find('input[type="text"]').val($(this).text());
                    $(this).parent(".result").empty();
                });
            });
            </script>

mit diesem Code führe ich einen LiveSearch aus die ich wiederrum mit den folgenden DIV´s mir im Browser Anzeigen lassen kann.


$div =

<div class="search-box-name"><input type="text" id="updatename" autocomplete="off" class="form-control" name="rows[]"  maxlength="50" placeholder="name"  style="background-color: #33FF99"/><div class="result"></div></div>

Das Funktioniert soweit. Schaue ich im Browser nach, steht auch ein event hinter dem Inputfield.

Jedoch, wenn ich die DIV´s in folgendem JS einbinden möchte, Funktioniert der LiveSearch nicht mehr....

			function addRow' . $rowName . '(){
				var table = document.getElementById("rowTable' . $rowName . '");
				var newRow = table.insertRow(-1);
				var cell = newRow.insertCell(0);
                                 cell.innerHTML = \' '.$div.'\';
                    
			}

Klick ich auf den Button, welcher die function addRow ausführt, in der die LiveSearch Div´s drin sind. Funktioniert der LiveSearch wie gesagt nicht mehr.
Schaue ich im Browser nach, fehlt ihm das Event dazu....

Daher die bitte und HILFE für mein Problem. Ich kann mir das nicht erklären...
Eine Vermutung habe ich, dass er die Referenz zu der LiveSearch funktion verliert.^^

Vielen Dank vor ab!

Gruß
CM6687

[Dormilich]

Schaue ich im Browser nach, fehlt ihm das Event dazu....

Du hast ja auch kein Event hinzugefügt (so wie beim start-up) ... woher soll da das Event kommen.

Für diesen Fall bieten sich "delegated events" an (https://learn.jquery.com/events/event-delegation/).

[CM6687]

Vielen Dank für deine Antwort.

Ich bin dran, dass mal umzusetzen!

[CM6687]

Du hast ja auch kein Event hinzugefügt (so wie beim start-up) ... woher soll da das Event kommen.

Für diesen Fall bieten sich "delegated events" an (https://learn.jquery.com/events/event-delegation/).

Danke nochmals für deinen Tipp!

Hab es mittlerweile anders lösen können mit <div focusin = "funktionsaufruf()">

Dabei bin ich nicht mal ein JavaScript Ass...