Как выполнить код при появлении элемента?
 

Добрый день!

Написал функцию, которая автоматически чистит атрибут title у изображений в Админ-панели. Но беда в том, что окно загрузки появляется через Ajax и естественно функция не срабатывает.

Как отследить, что элемент на странице появился и только тогда выполнить скрипт?

Вот он сам:

$( 'head' ).append( '<script>jQuery( document ).ready( function( $ ) { $(\'.media-sidebar label[data-setting="title"] input[type="text"]\').val(\'\'); } );</script>' );

snovapavel,
У тебя в аяксе должен быть успешный колбек в него и запихай свой хеад аппенд

Не понимаю о чём речь... Нельзя просто постоянно отслеживать появление элемента на странице?

Если страничка твоя - то изменения надо вносить сразу в код отрисовки нужного окошка, а не через зад. Если это юзерскрипт, или хак какой - тогда так и говори.

Юзерскрипт, конечно.


Вот мой скрипт:

// ==UserScript==
// @name         Processing site.ru
// @version      0.1
// @author       Ivan
// @match        [url]http://site.ru/*[/url]
// @require      [url]http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js[/url]
// @run-at       document-start
// ==/UserScript==

$(document).ready(function() {
  var $ = window.jQuery;

  $( 'head' ).append( '<script>jQuery( document ).ready( function( $ ) { $(\'.media-sidebar label[data-setting="title"] input[type="text"]\').val(\'\'); } );</script>' );

});

Я у себя использую подобный скрипт для вмешательства в чужой код(пример конкретно с ajax):

function waitFor(obj, ...props){
  var callback = props.pop();

  function isPrimitive(obj){
    return !["function", "object"].includes(typeof obj);
  }
  
  function next(obj, prop){
    if(props.length) return defineSetter(obj[prop], props.shift());
    callback(obj, prop);
  }

  function defineSetter(obj, prop){
    if(isPrimitive(obj)) 
      return console.error(`Object needed. Can not wait for property "${prop}" in primitive "${obj}".`);
    
    if(prop in obj) return next(obj, prop);
    
    Object.defineProperty(obj, prop, {
      enumerable: false,
      configurable: true,
      set: function(value) {
        delete obj[prop];
        obj[prop] = value;
        next(obj, prop);
      }
    })    
  }
  
  if(isPrimitive(obj)) 
    return console.error(`Object needed. Can not wait for properties in primitive "${obj}".`);
  if(!props.length) 
    return console.error('No properties to wait was specified.');
  
  defineSetter(obj, props.shift());
}

function decorate(func, callback){ 
  var out = function(){
    return func.apply(this, callback.apply(this, arguments) || arguments)
  };
  out.prototype = Object.create(func.prototype);
  return out;
}

function replace(text){
    return [
        text.replace(/foo/g, 'bar') //заменяем в полученном ajax ответе foo на bar
    ];
}

waitFor(unsafeWindow, '$', 'ajax', function($, ajax){ //ждём пока подгрузится $.ajax
  $.ajax = decorate($.ajax, function(options){ //подменяем $.ajax
    if(options && options.url ) console.log(url); //логируем url запроса
    if(options && options.success && options.url && options.url.startsWith('/some/')) 
      options.success = decorate(options.success, replace); //подменяем коллбэк для запросов на url начинающихся с "/some/"
  });
})

Писано на коленке, так что можно наверное красивей и лучше, но "работает и не трогаю".)

И каким образом это

$('.media-sidebar label[data-setting="title"] input[type="text"]').val('')

может очищать автоматически атрибут title изображений?