Question

Basically I have a drag and drop application and want to set a bootstrap popover on certain elements when things get dropped into place. This is what I have so far to set it up (after which I active the .popover):

            $(this).find(".simple-editable").attr({
                "rel":"popover",
                "data-html":"true",
                "data-content":"<div class='simple-edit-box'><form>" +
                    "<input type='text' placeholder='" + $(this).html() + "'>" +
                    "<button type='save' class='btn-success'>Save</button> </form></div>",
                "data-placement":"top"
            })

However the $(this).html() is pulling in the entire DIV (like it should), but what I want as that placeholder is simply the content within that specific .simple-editable class. So my basic question is that while using .find() is there a way to access the variable jquery is currently modifying?

Answer 1

var simpleEditable = $(this).find(".simple-editable");
simpleEditable.attr({
    "rel":"popover",
    "data-html":"true",
    "data-content":"<div class='simple-edit-box'><form>" +
    "<input type='text' placeholder='" + simpleEditable.html() + "'>" +
        "<button type='save' class='btn-success'>Save</button> </form></div>",
    "data-placement":"top"
});

---

More generally, in situations where you want to access “this” inside a scope that re-assigns the “this” keyword, cache a reference to it like so:

var self = $(this);
self.find(".simple-editable").attr({
   // in here, self.find(".simple-editable") works 
   // whereas $(this).find(".simple-editable") will return an empty array
});