rory
rory

Reputation: 1438

jQuery event not firing.

I have searched the site up and down and troubleshooted against what has been the problems for others whose events aren't firing.

I can confirm that the following are not issues:

  1. Duplicate id - using class instead of id to be sure
  2. Inside/outside of $(ready). I have tried both options
  3. It's not missing scripts
  4. It's not jQuery mobile adding classes. I thought this was the issue but was told it's not

The $(".deleteListItem").click(getDeviceIDforRemoval);is the event that isn't firing

I strongly suspect something is being called before it's ready or vice versa but can't figure out where. What's strange is that. What's really bugging me is that the follow up and similar event $("#remove_device").click(removeDevices); is firing. I've compared the two to see if there's any differences but can't see them.

Any help or even a hint would be much appreciated. Relevant code is as follows:

$(document).ready(function() {

    start();
    loadConfig();
    loadDevices();

    $(".deleteListItem").click(getDeviceIDforRemoval);   //why isn't this firing??!?!?


    $("#remove_device").click(removeDevices); //fires

});

...
...

var devices = [];

function loadDevices(onSuccess,onError,onWrongPassword) {
    Server.queryDevices(function (data) {
        devices = data;
        showDevices();
        if(onSuccess!==undefined)onSuccess();
    },onError,onWrongPassword);
}


function showDevices() { //works fine
    for (var i = 0; i < devices.length; i++) {
        var value = devices[i].Value;
        var geraete_id = devices[i].Key;
        if (value.Name != "") { // if name exists, use that as heading, else, use UDID
            $("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5>" + value.Name + "</h5>"
            + "<p>" + value.LastUsedBy + "</p>"
            + "<p>" + geraete_id + "</p>"
            + "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
            + "<a href='#confirm_device_removal' **class='deleteListItem'** data-rel='dialog'></a></li>");
        }
        else {
            $("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5>" + geraete_id + "</h5>"
                + "<p>" + value.LastUsedBy + "</p>"
                + "<p>Anonymous User</p>"
                + "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
                + "<a href='#confirm_device_removal' **class='deleteListItem'** data-rel='dialog'></a></li>");

        }
    }
    $("#geraete-list").listview("refresh");
}



function getDeviceIDforRemoval(){
    var $DIDtoRemove = $(this).parent().attr("id");
    $(".device_to_remove").text(devices[$DIDtoRemove].Key); // sends the device ID into confirm submission dialog
}

function removeDevices(){
    var geraetID =  $(".device_to_remove").text(); //retrieves the DID inserted by above function
    removeDevice(geraetID,loadDevices);
}

function removeDevice(udid,onSuccess){
    Server.removeDevice(udid,onSuccess);
}

Upvotes: 0

Views: 977

Answers (3)

A Paul
A Paul

Reputation: 8261

I think you have to change the below function

function getDeviceIDforRemoval(){
    var $DIDtoRemove = $(this).parent().attr("id");
    $(".device_to_remove").text(devices[$DIDtoRemove].Key); // sends the device ID into confirm submission dialog
}

to

getDeviceIDforRemoval = function (){
    var $DIDtoRemove = $(this).parent().attr("id");
    $(".device_to_remove").text(devices[$DIDtoRemove].Key); // sends the device ID into confirm submission dialog
}

Upvotes: 1

Pruthvi Raj Nadimpalli
Pruthvi Raj Nadimpalli

Reputation: 1373

Try:

$(".deleteListItem").on('click',function(){
  <! Whatever you want to do >
});

But calling getDeviceIDforRemoval() will not work as it is outside document.ready

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

You need to use event delegation as the elements are create dynamically

$("#geraete-list").on('click', ".deleteListItem", getDeviceIDforRemoval);

Upvotes: 1

Related Questions