Hook into jQuery .live function

Question

I am trying to write a peice of code that will hook into this:

var builder_blvd = {

    // Enter into editing a layout
    edit : function ( name, page )
    {
        // Get the ID from the beginning
        var page = page.split('[(=>)]');

        // Prepare the edit tab
        $('#builder_blvd .nav-tab-wrapper a.nav-edit-builder').text(themeblvd.edit_layout+': '+name).addClass(page[0]+'-edit');
        $('#builder_blvd #edit_layout .ajax-mitt').html(page[1]);

        // Setup hints
        $('.sortable:not(:has(div))').addClass('empty');
        $('.sortable:has(div)').removeClass('empty');

        // Setup sortables
        $('.sortable').sortable({
            handle: '.widget-name',
            connectWith: '.sortable'
        });

        // Sortable binded events
        $('.sortable').bind( 'sortreceive', function(event, ui) {
            $('.sortable:not(:has(div))').addClass('empty');
            $('.sortable:has(div)').removeClass('empty');
        });

        // Setup widgets
        $('#builder_blvd .widget').themeblvd('widgets');

        // Setup options
        $('#builder_blvd').themeblvd('options', 'setup');

        // Take us to the tab
        $('#builder_blvd .nav-tab-wrapper a').removeClass('nav-tab-active');
        $('#builder_blvd .nav-tab-wrapper a.nav-edit-builder').show().addClass('nav-tab-active');
        $('#builder_blvd .group').hide();
        $('#builder_blvd .group:last').fadeIn();

    }

};

I want to hook into $('#builder_blvd #edit_layout .ajax-mitt').html(page[1]); to trigger a piece of code that removes a DOM element from the that whenever it posts. The above code is from a parent theme and I'd rather leave it untouched if possible.

Here's what I tried to get this working:

jQuery(document).ready(function($) {
    $('#builder_blvd #edit_layout .ajax-mitt').bind( 'change', function(event, ui) {
        $('#edit_builder #titlediv').remove();
    });
});

Any ideas how to fix this?

A couple promising things I found when googling for "jquery event html change": http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery and http://stackoverflow.com/questions/3722639/jquery-event-for-html-change-in-a-div-element — Chad, Feb 08 '13 at 20:57
What types of elements are `#builder_blvd` `#edit_layout` and `.ajax-mitt`? Because `change` only fires for `input`, `textarea` and `select` elements. — Matt Burland, Feb 08 '13 at 20:58

score 0 · Answer 1 · answered Feb 08 '13 at 22:54

You can overwrite the original object and access the old function :) so there is no need to "hook" into that .html-code

var builder_blvd_edit = builder_blvd.edit;
builder_blvd.edit = function ( name, page ){
    builder_blvd_edit(name, page);
    $('#edit_builder #titlediv').remove();
}

Hook into jQuery .live function

1 Answers1