Как выполнить функцию, используя значение текстового поля Onclick для DIV вместо Onclick для текстового поля

Question

У меня есть эта функция:

$("#border-radius").click(function(){   
var value = $("#border-radius").attr("value");
    $("div.editable").click(function (e) { 

       e.stopPropagation();

       showUser(value, '2', this.id)
       $(this).css({
          "-webkit-border-radius": value
       });  
    });                      
});

Читает значение текстового поля,

input type="text" id="border-radius" value="20px"

... и делает с ней несколько вещей, которые не имеют отношения к моей проблеме.

Текстовое поле имеет id="border-radius", и когда оно щелкается (и имеет значение), функция выполняется, как показано: $("#border-radius").click(function(){ ...do some stuff...

По сути, я хочу иметь возможность ввести значение в текстовое поле, а затем щелкнуть объект (кнопку отправки или div, предпочтительно div) и заставить его выполнять функцию после: $("#border-radius").click(function(){ ...do some stuff... Вместо необходимости нажимать само текстовое поле

Что я могу добавить / изменить, чтобы включить это?

Answer 1

Я думаю, вам нужно определить цель события.

, что вы можете сделать это с помощью

свойства цели события

пример

$(document).ready(function() {
    $("#border-radius").click(function(event) {
        alert(event.target.id);
       //match target id and than proceed futher 
    });
});

Answer 2

Поместите обработчик щелчка на #my-button или любую другую кнопку.

$("#my-button").click(function(){
    var value = ... /* your original code */
});

Это все равно будет работать, потому что вы получаете значение типа $("#border-radius").attr("value");, а не $(this).attr("value");. Таким образом, все, что вам нужно изменить - это элемент, к которому вы прикрепляете функцию щелчка.

В качестве альтернативы, если вы хотите сохранить оба обработчика, вы можете просто использовать его для обоих элементов следующим образом:

var commonHandler = function(){   
    var value = ... /* your original code */
};

$("#border-radius").click(commonHandler);
$("#my-button").click(commonHandler);

Вы можете также вызвать событие click #border-radius, но при этом будут выполнены все обработчики событий, прикрепленные к нему:

$("#my-button").click(function () {
     $("#border-radius").click();
     // or $("#border-radius").trigger('click');
});