Question

I have the next code

HTML

<section class="listjobs" style="display: block;">
<div class="jobgroup GigaLab">GigaLab</div>
<div class="jobgroup CraftedContours">CraftedContours</div>
<div class="jobgroup FunPuntos">FunPuntos</div>
<div class="jobgroup Lexplique,LLC">Lexplique,LLC</div>
<div class="jobgroup Arriendas.cl">Arriendas.cl</div>
<div class="jobgroup Scholaroo.com">Scholaroo.com</div>
<div class="jobgroup OctaneNation">OctaneNation</div>
<div class="jobgroup Loogares.com">Loogares.com</div>
<div class="jobgroup AgentPiggy">AgentPiggy</div>
<div class="jobgroup AgentPiggy">AgentPiggy</div>
</section>

this is my jQuery.

        (function($){

    $('#searchjob').keypress(function(e){
        var search = $.trim($(this).val());

        if (e.which == "13") {

            $.ajax({
                beforeSend: function(){
                    //$('#loading').html(<img src="rutagif" alt="loading" />);
                },
                url:"../wp-admin/admin-ajax.php",
                data:{ action: 'searching_job',data : search },
                //dataType: "json",
                type: "POST",
                success: function(data){
                    var jsonresult = JSON.parse(data);
                    var jobs = $('.listjobs');
                    var startups = [];

                    $.each(jsonresult, function(i, item){
                        startups.push(jsonresult[i].meta_value);
                    });

                    startups = $.unique(startups);

                    //console.log(startups);

                    jobs.hide().empty();

                    $.each(startups, function(i, item){
                        var startup = startups[i].replace(" ","");
                        jobs.append("<div id='"+startup+"'class='jobgroup'><h2>"+startups[i]+"</h2><p></p></div>").slideDown();
                    });

                }

            });

            e.preventDefault();

        };

    });

This code not found

    $(this).click(function(e){
        console.log($(this).text());
    });

Also try with $(‘.lisjobs’), this show an alert but not get the data, also try with $(‘section.listjobs .jobgroup’), $(‘.jobgroup’) and not found. Any other idea ?

 })(jQuery);

but not found :/. How to get the value of div with class “jobgroup”?. Any example.

Answer 1

if you want to get the value of the clicked jobgroup you’d do

$('section.listjobs .jobgroup').click(function(e){
    var name = $(this).text();
    /* Do something with "name" here */
});

But that just sets a variable with the text, it doesn’t do anything with it.

EDIT: It looks like you load this content through AJAX, in that case you can’t bind them at runtime but need to bind them dynamically using on(). This code is assuming that section.listjobs is NOT loaded through AJAX.

$('section.listjobs').on('click', '.jobgroup', function(e){
    var name = $(this).text();
    /* Do something with "name" here */
});

DEMO

You could also bind them using the first method, but then you need to run that script AFTER the elements have been added to the DOM, that is, at the end of the ajax success function. I’d still go with on().