Как реализовать пересылку события из iframe?

Question

[game802]

Добрый день, уважаемые знатоки. По ходу работу, у меня возник следующий вопрос:
При клике на input, у меня появляется модальное окно со встроенным iframe.
В этом встроенном iframe есть картинки, при клике на одну из которых, ссылка(этой картинки) записывается в переменную.

$('iframe').contents().find('.uploadfile').on('click', function () {
  url = $(this).attr('src');
});

Далее, у меня есть input(а их на странице много), в который и должна эта переменная перелезть...
И в итоге у меня получается вот такой вот гавнокодец:

$('.slider_url_image input').on('click', function() {
  $('iframe').contents().find('.uploadfile').on('click', function () {
    url = $(this).attr('src');
  });
  
  $(this).val(url);
});

Большая проблема в том, что $(this).val(url); отработает только один раз, так как мы считываем click.
Так вот... каким образом мне отследить изменение переменной и передать ее в нажатый input? Т.е чтобы в input из iframe перетащилась ссылка, как только мы кликнем по изображению...
Буду рад любой помощи! Большое спасибо!

Comments

[Модератор]

game802, за порчу вопросов будет больно.

Answer 1

[Yevgeniy Kisselyov]

так?

$('.slider_url_image input').on('click', function() {
  var inp = $(this);
  $('iframe').contents().find('.uploadfile').on('click', function () {
    url = $(this).attr('src');
    inp.val(url);
  });
  
});

Comments

[game802]

вау, невероятно!! Большое спасибо за помощь!!!!

[game802]

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

[Yevgeniy Kisselyov]

HackOwnB: Не совсем понял что нужно. Динамически будут добавляться картинки с классом ".uploadfile" и на них тоже нужен тот же клик?

[Yevgeniy Kisselyov]

Если правильно понял - то должно работать:

$('.slider_url_image input').on('click', function() {
  var inp = $(this);
  $('iframe').contents().on('click', '.uploadfile', function () {
    url = $(this).attr('src');
    inp.val(url);
  });
  
});

[game802]

Yevgeniy Kisselyov: да... именно. Я это сделал вот так:

$('.slider_url_image input').on('click', function() {
  var inp = $(this);
  setInterval(function() {
    $('iframe').contents().find('.uploadfile').on('click', function () {
        url = $(this).attr('href');
        inp.val(url);
    });
  }, 100);
});

Только выглядит как-то кривовато... или сойдет?
Суть в том, что в iframe динамически подгружаются картинки... то есть, нужно оповестить обработчик, что там появились новые .uploadfile, вот

[Yevgeniy Kisselyov]

HackOwnB: Я выше написал решение, должно работать и без интервала

[game802]

Yevgeniy Kisselyov: да, большое спасибо за помощь! И могу ли я задать еще один вопрос..? У меня динамически генерятся input'ы на странице... могу ли я как-то передать ссылку в динамически сгенерированный input? Прошу прощения за назойливость...

[Yevgeniy Kisselyov]

HackOwnB:
Опять таки, если инпуты генерятся с одинаковым классом то заменить

$('.slider_url_image input').on('click', function() {

на

$(document).on('click', '.slider_url_image input', function() {

[game802]

Yevgeniy Kisselyov: да... проблема в том, что если сгенерировался один input, то все хорошо... а если два и более, то он начинает вставлять одинаковую ссылку во все сгенерированные input'ы... Как можно решить данную проблему? Большое спасибо!

[Yevgeniy Kisselyov]

$(document).on('click', '.slider_url_image input', function() {
  var inp = $(this);
  setInterval(function() {
    $('iframe').contents().find('.uploadfile').on('click', function () {
        url = $(this).attr('href');
        inp.val(url);
    });
  }, 100);
});

[game802]

Yevgeniy Kisselyov: к сожалению, проблема осталась... в чем может быть причина, как Вы думаете?

[Yevgeniy Kisselyov]

HackOwnB: Я не тот код скопировал, без таймаута нужно, и можно попробовать убирать предыдущие эвенты как вариант

$(document).on('click', '.slider_url_image input', function() {
  var inp = $(this);
  // может поможет убирать предыдущие события для этого добавил строку:
  $('iframe').contents().find('.uploadfile').unbind('click');
  // а дальше все тоже самое
  $('iframe').contents().on('click', '.uploadfile', function () {
    url = $(this).attr('src');
    inp.val(url);
  });
  
});

[game802]

Yevgeniy Kisselyov: забыл поблагодарить Вас за помощь... Большое спасибо Вам за ответы и за помощь в решении данной проблемы!!