jQuery conflict with Repeater, Flex-fields (creating own field type)

• Mike Rodriguez

• July 31, 2013 at 2:41 am

Hello,

I’m creating a new field type and I’m having heaps of conflict when my new field type is inside the repeater, flex field or when there’s two or more on a page/post/etc.

Is there anything i have to take into account to ensure compatibility with repeater field, flex fields or more than one field?

below is my jQuery

	$(document).live('acf/setup_fields', function(e, postbox){
		
		$(postbox).find('.acf-icon-field').each(function(){

			var iconField = $(this)

			var iconVal = $(".icon_field").val();
			$('#selectedIcon').addClass(iconVal);

			$("#selectIconButton").click(function () {
			    $("#iconSelector").fadeToggle();
			});

			$(".icon-list span").click(function () {
			    selectIcon($(this));
			});

			function selectIcon(e) {
			    var selection = e.attr('class');
			    $(".icon_field").val(selection);
			    $("#iconSelector").hide();
			    $('#selectedIcon').removeClass();
			    $('#selectedIcon').addClass(selection).show();
			    return;
			}

			$('input[name="icon-search"]').keyup(function(){
			   var sValue = $(this).val().toLowerCase();
			    
			    $.each($('.icon-list span'), function(){
			        if($(this).attr('class').indexOf(sValue)===-1){
			         $(this).fadeOut(0);   
			        }else{
			         $(this).fadeIn(0);   
			        }
			    });
			    
			});

			
		});
	
	});

As you can see, this field uses a bit of jQuery (using the input.js file inside the field creation template provided by @elliot)

• Elliot

• July 31, 2013 at 2:51 pm

Hi @Mike Rodriguez

The issue is that every time ACF fires the ‘acf/setup_fields’ event, you are applying jQuery events to ALL elements which match your selection.

You should be targeting only elements which exists WITHIN the $(postbox)