Question

I need to check if button in jsp page is clicked.

I have 1 jsp page and 2 JavaScript page. First JSP page is an index which takes input from user and send to javascript1, javascript1 then query it and output back in index page with buttons was embedded on each output.
What I want is, if user click one particular button, javascript2 will detect the click and taking value of that particular button to be next search query and again display the result back at index page.

Here is my code :

INDEX.JSP

<div>Please enter search keyword</div>
<input type="text" name="valueLiteral" class="input-box"/><br>
<input type="submit" name="indexsearch" value="Search" class="input-button">

Which javascript1 will detect if input name "indexsearch" is clicked and take value name "valueLiteral" to query out the result.
This part work just fine.

Here is code in Javascript1.js:

$(document).ready(function() {
$("#result").hide();
$("input[name='indexsearch']").click(function() {
    and so on.......
    var stmt = [];
          
     $.each(arrayPredicate, function(k,v){
     stmt[k] = "<span class='subject' id="+arraySubject[k]+">" + arraySubject[k] + "</span> " + " -> " + v + " : "+ "<span class='object'>" + arrayObject[k] + "</span>" + "**<input type = 'submit' class = 'searchAgain-button' name = 'searchMore' value = " + arrayObject[k] + "></input>**<br><br>";
     });
            stmt = stmt.sort();
            $.each(stmt, function(k,v){
                $("#result").append(v);
            });
        } else {
            var $noresult = "No Result : Please enter a query";
            $("#result").append($noresult);
        }
    });

As you have seen, I created buttons and append it to the end of each search result. This part still works (button appears and display the name of the next query).

Here is the last part of code : Javascript2.js:

    $(document).ready(function() {
    $("input[name='searchMore']").click(function() {
    
    $("#result").show();
    $("#result").empty();

    loading_img();
    var $textInput = $(this).attr("Value");
 
            var stmt = [];
            //concat all related array into string (create triple statement)
            $.each(arrayPredicate, function(k,v){
                stmt[k] = "<span class='subject' id="+arraySubject[k]+">" + arraySubject[k] + "</span> " + " -> " + v + " : "+ "<span class='object'>" + arrayObject[k] + "</span><input type = 'submit' class = 'searchAgain-button' name = 'searchMore' value = " + arrayObject[k] + "></input><br><br>";
            });
            stmt = stmt.sort();
            $.each(stmt, function(k,v){
                $("#result").append(v);
            });
        } else {
            var $noresult = "No Result : Please enter a query";
            $("#result").append($noresult);
        }
    });        
});

Those above code is not work, after some testing I think this JavaScript page can not detect that the button name "searchMore". And eventually make other part of code not work.

Any suggestion?

Answer 1

Have you try

$("input[name='searchMore']").live("click", function() { ...

?

In
http://api.jquery.com/live/

Description: Attach an event handler for all elements which match the current selector, now and in the future.