JQuery is not detecting my DOM Object when clicked

Question

Having a bit of trouble figuring out what is going wrong here and wondered if anyone might be able to help me out. I'm using JQuery throughout my site but for some reason on this particular page it does not seem to be working.

This code here:

$("#keyword").autocomplete({                        
    source:'../../pages/ajax/autocomplete/autocomplete_tags.php',
    dataType: 'json',
    minLength:1
});

//When you hit the search button load the new tags
$("#srchBtn").click(function(e){
    e.preventDefault();
    var tag_name = $('#keyword').val();
    $(".dashboardtable").load('../../pages/ajax/autocomplete/search_tags.php', {tag_name: tag_name },function(response, status, xhr){
            $(".dashboardtable").html(response);
            $("#keyword").val("");
            $("#keyword").attr("placeholder", "Search Tags...");
    });
});

What should happen is when the user begins typing it begins pulling suggestions out of the database and when they click the search button it loads the results into a div using AJAX. I noticed it wasn't working and I decided I'd try a simple test:

$('#srchBtn').click(function(){
    console.log('hit');
})

But nothing appeared in the console. I then tried

console.log($('#srchBtn')); and It does seem to be getting a reference to my dom object, it just isn't firing the click event for some reason.

I've got the following scripts at the top of the page:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> 
 <script src="../scripts/auto-complete/tag_list_search.js"></script>

and I am getting no errors in my console. So what could possibly be the problem? Any help is much appreciated. Also this is my HTML:

<input type="text" id="keyword" placeholder="Search Tags..." size="33"/>
<input type="button" class="" id="srchBtn" value="Search"/>

`console.log('#srchBtn');` simply logs the string `#srchBtn`. It doesn't get a reference to an element. Is *all* your code included at the top of the page? — Felix Kling, Nov 12 '14 at 17:17
That was a typo on my part, i've updated the question. Yes it is — Javacadabra, Nov 12 '14 at 17:19

score 0 · Answer 1 · answered Nov 12 '14 at 17:19

Please wrap the code in jquery ready function...(in case this is not done)

$(function(){ // jquery ready function
$("#keyword").autocomplete({                        
    source:'../../pages/ajax/autocomplete/autocomplete_tags.php',
    dataType: 'json',
    minLength:1
});

//When you hit the search button load the new tags
$("#srchBtn").click(function(e){
    e.preventDefault();
    var tag_name = $('#keyword').val();
    $(".dashboardtable").load('../../pages/ajax/autocomplete/search_tags.php', {tag_name: tag_name },function(response, status, xhr){
            $(".dashboardtable").html(response);
            $("#keyword").val("");
            $("#keyword").attr("placeholder", "Search Tags...");
    });
});
});

JQuery is not detecting my DOM Object when clicked

1 Answers1