Ajax POST and data-target selector

Question

SEE UPDATE AT BOTTOM

I'm developing a server directory navigation thing.

I have an ajax script that grabs the value of a selected dropdown option on change (the value is the relative path of the selected directory), sends the value to a php function, the php function then returns an array, which includes new dropdown options for the response function to replace the old ones with, and breadcrumb links for backwards navigation.

Everything works fine when using the dropdown selections to post the data and get a response from php.

But now I'm trying to duplicate it so that clicking on the breadcrumb links will do the same thing, for backwards navigation, but I'm not getting it to respond. In the php generated html, a given A tag looks like this:

<a href="javascript:" data-target="'.$piecelink[$k].'">'.$piece.'</a>

So I'm using data-target the same way I'm using the selected value from the dropdown. Then my second ajax function is just a duplicate of the working original, with the main selector changed from the dropdown to the breadcrumb link, on.('change') to on.('click') , and this.value to this.data('target') as seen below. But I'm not getting a response from clicking on the breadcrumb links:

(function($) {
    $(document).ready(function(){
        $('div#ghsc-upload-path a').on('click', function(){
            $.post(
                PT_Ajax.ajaxurl,
                    {
                        action : 'ajax-inputtitleSubmit',
                        dataType : 'html',  
                        pathpart : this.data('target'),
                        nextNonce : PT_Ajax.nextNonce
                    },
                    function( response ) {
                        $container = $('div#ghc-upload-path-container');
                        $putpath = $('div#ghsc-upload-path');
                        $dropdown = $('select#ghsc-upload-directories');
                        $dropdown.empty().append(response.ops).trigger('liszt:updated');
                        $putpath.html(response.path);
                    }
            );
            return false;
        }); 
    });
})(jQuery);

Any suggestions?

UPDATE I think I know why it's not working. It's because the a elements are not on the page on original page load. But I don't know how to get the script to recognize that they're their. I assume it's because it's wrapped in document.ready, but how do I trigger a rescan of the dom?

Answer 1

Try to change the line:

$('div#ghsc-upload-path a').on('click', function(){

into

$('div#ghsc-upload-path a').click(function(){

I haven't tested that, but it could help

Answer 2

Found it. It wasn't live was the problem, but .live is deprecated, so I went to the live page ( http://api.jquery.com/live/ ) and it showed me how to properly convert to .on(). So here's how I call the function to get it to work:

$( document ).on( 'click', 'span[id^=ghsc-pathpart-]', function(){