My keyup calls a click() but the click() doesn't delegate

Question

I have a program that stores string data in local storage when a save-icon is clicked, based on the ID of its parent. I added up keyup() event to link to that click() event, but in this instance the click isn't delegated to an ID, and the program acts like all the save-icons are clicked, which messes it up.

Is there a way to get the save icon to delegate the click function after being called by the keyup function? Code below:

// When save icon is clicked, gets hourText from storage, checks it exists, parses to an array. Changes relevant text based on user input, saves array, calls display function

$(".save-icon").click(function (event) {

    event.stopPropagation();
    dailyHourText = "hourText" + currentDayEl.innerHTML;
    var toDoList = localStorage.getItem(dailyHourText); // this is the string from the local storage
    //convert string toDoList into array daysActivities
    if (toDoList === null) {
        daysActivities = ["", "", "", "", "", "", "", ""];
    }
    else {
        daysActivities = JSON.parse(toDoList);
    }

    var blockClicked = $(this).parent().attr("id");
    var pos = blockClicked - 9; // converts id to array position

    daysActivities[pos] = $("#" + blockClicked).find(".inputbox").val(); 

    toDoList = JSON.stringify(daysActivities); // stringify array
    localStorage.setItem(dailyHourText, toDoList); // store array
    $("#" + blockClicked).find(".inputbox").addClass("hide"); // hides input box
    $("#" + blockClicked).find(".textarea").removeClass("hide"); // shows text
    displayActivities();
});

$(".inputbox").on('keyup', function (event) {
    event.stopPropagation();
    if (event.keyCode === 13) {
        $(".save-icon").click();
    }
});

Answer 1

In this case, you have 2 events that are ultimately performing the same thing. Pull the meat of your logic out into its own function, and simply call that from both the "click" and the "keyup" handlers. The only thing you should have to pass into that function is the parent element (from $(this).parent() in the click handler).

$(".save-icon").click(function (event) {

    event.stopPropagation();
    updateLocalStorage($(this).parent());
});

$(".inputbox").on('keyup', function (event) {
    event.stopPropagation();
    if (event.keyCode === 13) {
        // get the correct "save-icon" for this inputbox, and get it's parent
        // modify this as appropriate for your DOM structure
        var parent = $(this).closest(".save-icon").parent();
        updateLocalStorage(parent);
    }
});

function updateLocalStorage(parent) {
    dailyHourText = "hourText" + currentDayEl.innerHTML;
    var toDoList = localStorage.getItem(dailyHourText); // this is the string from the local storage
    //convert string toDoList into array daysActivities
    if (toDoList === null) {
        daysActivities = ["", "", "", "", "", "", "", ""];
    }
    else {
        daysActivities = JSON.parse(toDoList);
    }

    var blockClicked = $(parent).attr("id");
    var pos = blockClicked - 9; // converts id to array position

    daysActivities[pos] = $("#" + blockClicked).find(".inputbox").val(); 

    toDoList = JSON.stringify(daysActivities); // stringify array
    localStorage.setItem(dailyHourText, toDoList); // store array
    $("#" + blockClicked).find(".inputbox").addClass("hide"); // hides input box
    $("#" + blockClicked).find(".textarea").removeClass("hide"); // shows text
    displayActivities();
}