CODEWITHSUNDEEP
javascriptjquery
Björn C
Björn C

Reputation: 4008

Jquery fetch is undefined

I´m trying to fetch the id of a dynamicly added div. (.flak)
I´m using draggable and droppable.
All i got is "undefined".
This line:

var flakId = $(this).next('.flak').attr('id');

HTML

<div class="col-md-1">
  <button class="btn btn-success" id="btnAddFlak">+ Flak</button>
</div>
<div class="listElements">
  <div class='elementDiv' id="1">1</div>
  <div class='elementDiv' id="2">2</div>
  <div class='elementDiv' id="3">3</div>
</div>
<br>
<br>
<div class="well" id="flakDiv"></div>

JS

//run function makeMov
makeMov();

//Create flak
$('#btnAddFlak').on('click', function () {

//Set flakNr
flakNr = $('.flakMiddle').last().find("span").text();
if (isNaN(flakNr)) flakNr = 1;

//Increase flakNr
flakNr++;

//create flak id
var flakId = flakNr;

//Flak HTML setup
var flak = $('<span class="deleteFlak pull-right">x</span><div class="flak nopadding" id="' + flakId + '"><div class="flakSideUp nopadding"></div><div class="flakMiddle">Flak <b><span>' + flakNr + '</span></b><p>hej</p></div><div class="flakSideDown nopadding"></div></div><br>');

//Insert flak to flakDiv
$('#flakDiv').append(flak);


//Run function makeMov
makeMov();
}); //END Create flak   

//Delete flak
$(document).on('click', '.deleteFlak', function () {
//create flak id
var flakId = $(this).next('.flak').attr('id');

//Remove flak from DOM
$(this).next('.flak').remove();
$(this).remove();

}); //END Delete flak

function makeMov() {
  //Make elementDiv draggable
  $('.elementDiv').draggable({
    revert: 'invalid',
    grid: [5, 5],
    containment: "document",
});

//Make listElements droppable
$('.listElements').droppable({
    grid: [5, 5],
    accept: '.elementDiv',
    containment: "document",
    tolerance: "fit",
});

//Make flakSideUp droppable
$('.flakSideUp, .flakSideDown').droppable({
    grid: [5, 5],
    accept: '.elementDiv',
    containment: "document",
    tolerance: "fit",
    hoverClass: "drop-hover",
    activeClass: "ui-state-highlight",

    drop: function (event, ui) {
        var flakId = $(this).next('.flak').attr('id');
        var elId = ui.draggable.attr("id");
        alert(flakId + " -> " + elId);

        /*Get your element object and store into variable*/
        var el = ui.draggable;

        //Get position
        var elpos = el.position();
        var newPos = "x:" + elpos.left + " y:" + elpos.top;
    }
  });
}; //END function makeMOV

JS FIDDLE http://jsfiddle.net/z49sdh9v/

(Press button to add flak, drag a div into a droppable area, alert is undefined)

Upvotes: 2

Views: 277

Answers (1)

Jai
Jai

Reputation: 74738

This can be changed:

var flakId = $(event.target).closest('.flak').attr('id');

you can make use of event to get the target and traverse up to the closest parent to get the desired id of it.

Check the fiddlewa.

Upvotes: 1

Related Questions