Почему скрипт не срабатывает (jQuery)?

Question

[triowinner]

Добрый день, уважаемые знатоки.
Первый раз сталкиваюсь с такой ситуацией. Попытаюсь поподробнее описать и привести пример.

Я создал тестовый сайт с форумом, где при переходе по ссылке можно увидеть у пользователя колонку "Репутация 100".
При клике по цифре 100, открывается модальное окно с историей репутации, где я уже заранее выставил 3 значения репутации - понижение репутации, повышение репутации и репутация не изменилась.
С помощью простенького скрипта, я отследил элементы с разными TITLE и на каждый повесил свой стиль. Но я не могу понять, почему TITLE тупо не отслеживается, хотя все прописано верно.

Я подумал, может проблема в моих кривых руках и специально провел тест, где скопировал html разметку с сайта и поместил тот же скрипт - и о чудо, все заработало!
Я не могу понять, почему на сайте, при тех же условиях, скрипт не срабатывает, а на примере все четко работает?

Comments

[Влад Хеллсайт]

uCoz серьёзно?

[triowinner]

Владлен Хеллсайт, почему бы и нет)

[V Sh.]

Ну через консоль я элемент с нужным title нахожу без проблем... А как дела обстоят с кодировкой? В одной кодировке написаны файлы?

[triowinner]

V Sh., если не ошибаюсь, то да <meta charset="utf-8" />

Answer 1

[triowinner]

Помучившись несколько дней, нашел решение через функцию(параметр):

<a href="javascript://" rel="nofollow" onclick="rep($UID$)">$REP_RATING$</a>

function rep(id) {
  new _uWnd( 'Rh',' ',400,250, { autosize: 1, closeonesc: 1, maxh: 300, minh: 100, oncontent:function() {
    $("div[title^='Уровень повышен']").parent('td').parent('tr').parent('tbody').parent('table').addClass('plus');
    $("div[title^='Уровень понижен']").parent('td').parent('tr').parent('tbody').parent('table').addClass('minus');
    $("div[title^='Уровень репутации не изменен.']").parent('td').parent('tr').parent('tbody').parent('table').addClass('not');
  }}, { url: '/index/9-' +id } );
  return false;
}

Answer 2

[Павел Корнилов]

'use strict';
	var repa= document.querySelectorAll('div[title*=\'Уровень\']'),
		compare= {
			'+1' : 'cc423d',
			'-1' : '2d8948',
		};

	function findParent(el) {
		var p= el.parentNode;
		if(!p) return null;
		return (p.id && p.id.indexOf('blr') !== -1)? p : findParent(p);
	}

	[].forEach.call(repa, function(i) {
		var parent= findParent(i);
		if(!parent) return;
		Object.keys(compare).forEach(function(c) {
			if (i.title.indexOf(c) !== -1) parent.style.backgroundColor= '#' + compare[c] ;
		})
		parent.style.backgroundColor= parent.style.backgroundColor || '#7b7b7b';

	})

https://jsfiddle.net/adxcw8co/1/

Comments

[triowinner]

Извините, а зачем вы усложнили то, что я показал на простом примере jQuery?
При том, что все равно этот скрипт не работает на сайте должным образом. Проблема в инициализации скрипта.

[Павел Корнилов]

triowinner, инициализируйте по DOMContentLoaded.
А насчет усложнил - по мне, так упростил и сделал более универсальным. Теперь его можно легко адаптировать под аналогичные нужды.

[triowinner]

Извините, но инициализация по DOMContentLoaded не помогает.

[Павел Корнилов]

А, так у вас всплывающее окно генерируется по ГЕТ-запросу серверу.
За его генерацию отвечает функция

function onclick(event) {
  new _uWnd('Rh', ' ', 400, 250, {
    autosize: 1,
    closeonesc: 1,
    maxh: 300,
    minh: 100
  }, {
    url: '/index/9-1'
  });
  return false;
}

Являющаяся обработчкиком клика по 100.
Можно попробовать переписать ее на обычный аякс-запрос по адресу '/index/9-1. Но тогда придется самому динамически строить окно с ответом.

[triowinner]

KorniloFF, Да, я уже понял, что придется переписать на обычный аякс-запрос. Уже подобный пример нашел в интернете. Жаль, что другого нет выхода, не думал, что это создаст столько геморроя. Спасибо!